<p>
  All boxes have <code>width: 200px !important</code>. As you can see, the <code>flex-basis</code> takes precedce over <code>width</code> and <code>height</code>.
</p>

<h2>0) no flex-basis</h2>

<div class="container container--0">  
  <p class="box">Lorem ipsum dolor.</p>
  <p class="box">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Possimus ipsa ipsam deserunt hic nam ratione. Excepturi similique quos dolorum corporis ab sed. </p>
  <p class="box"><img src="https://satyr.dev/600x250/58563a" alt="Satyr.io dummy image" width="600" height="250" /></p>  
</div>

<h2>1) flex-basis: auto</h2>

<div class="container container--1">  
  <p class="box">Lorem ipsum dolor.</p>
  <p class="box">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Possimus ipsa ipsam deserunt hic nam ratione. Excepturi similique quos dolorum corporis ab sed. </p>
  <p class="box"><img src="https://satyr.dev/600x250/58563a" alt="Satyr.io dummy image" width="600" height="250" /></p>  
</div>

<h2>2) flex-basis: content</h2>

<div class="container container--2">  
  <p class="box">Lorem ipsum dolor.</p>
  <p class="box">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Possimus ipsa ipsam deserunt hic nam ratione. Excepturi similique quos dolorum corporis ab sed. </p>
  <p class="box"><img src="https://satyr.dev/600x250/58563a" alt="Satyr.io dummy image" width="600" height="250" /></p>  
</div>

<h2>3) flex-basis: 0</h2>

<div class="container container--3">  
  <p class="box">Lorem ipsum dolor.</p>
  <p class="box">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Possimus ipsa ipsam deserunt hic nam ratione. Excepturi similique quos dolorum corporis ab sed. </p>
  <p class="box"><img src="https://satyr.dev/600x250/58563a" alt="Satyr.io dummy image" width="600" height="250" /></p>  
</div>

<h2>4) flex-basis: 300px</h2>

<div class="container container--4">  
  <p class="box">Lorem ipsum dolor.</p>
  <p class="box">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Possimus ipsa ipsam deserunt hic nam ratione. Excepturi similique quos dolorum corporis ab sed. </p>
  <p class="box"><img src="https://satyr.dev/600x250/58563a" alt="Satyr.io dummy image" width="600" height="250" /></p>  
</div>
.container {
  display: flex;
}

.box {
  padding: 1em;
  margin: 1em;
  width: 200px !important;
}

.container--0 .box {
}

.container--1 .box {
  flex-basis: auto;
}

.container--2 .box {
  flex-basis: content;
}

.container--3 .box {
  flex-basis: 0;
}

.container--4 .box {
  flex-basis: 300px;
}



/* etc. */

img {
  max-width: 100%;
  height: auto;
}

/* ETC (Formatting only): */

body {
  margin: 1.5em;
  font-size: 130%;
  font-family: sans-serif;
  background: #F2F0EC;
  color: #2E2C08;
}

.container {
  display: flex;  
  border: 10px solid #2E2C08;
  background: white;  
}

.box {
  margin: 0.25rem;
  padding: 0.5em;
  text-align: center;
  background: #abab9d;
}

fieldset {
  border: #abab9d 1px solid;
  padding: 0;
  margin-bottom: 2em; 
}

label {
  display: inline-block;
  padding: 0.5em;
  cursor: pointer;
}

.active {
  background: #abab9d;
}

.box--one {
  background: #abab9d;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.