<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="http://via.placeholder.com/600x250"></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="http://via.placeholder.com/600x250"></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="http://via.placeholder.com/600x250"></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="http://via.placeholder.com/600x250"></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="http://via.placeholder.com/600x250"></p>  
</div>
.container {
  display: flex;
}

.box {
  padding: 1em;
  background: lightgrey;
  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;
}

body {
  margin: 1em;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.