<p>
  They say: <code>width</code> and <code>flex-basis</code> are practically the same. But there are not.
</p>

<p>
  It seems to me like <code>flex-basis</code> can't be smaller then content minimal width. <code>width</code> can be. I can change it with <code>min-width: 0</code>.
</p>

<p>
  Following black line is <code>100px</code> wide:
</p>

<p class="hundert-px"></p>

<div class="item">
  <p class="item__left">
    Lorem ipsum dolor sit, amet consecteturreallylongword. 
  </p>
  <div class="item__right">
    <h2>width: 100px</h2>  
  </div>    
</div>  

<div class="item">
  <p class="item__left">
    <img src="http://via.placeholder.com/200x125">    
  </p>
  <div class="item__right">
    <h2>width: 100px</h2>  
  </div>    
</div>  

<div class="item item--flex-basis">
  <p class="item__left">
    <img src="http://via.placeholder.com/200x125">    
  </p>
  <div class="item__right">
    <h2>flex-basis: 100px</h2>      
  </div>    
</div>  

<div class="item item--flex-basis">
  <p class="item__left">
    Lorem ipsum dolor sit, amet consecteturreallylongword. 
  </p>
  <div class="item__right">
    <h2>flex-basis: 100px</h2>      
  </div>    
</div>  
.container {
  padding-left: 100px;
}

.item {
  display: flex;
  padding: 1em;
  background: WhiteSmoke;
  margin-bottom: 1.5em;
  border: dotted 5px black;
}

.item__left {
  flex: none;  
  width: 100px;
  margin-right: 20px;
}

.item--flex-basis .item__left {
  width: auto;
  flex-basis: 100px;
}

.item__right {
  flex: auto;
}

/* etc: */

.hundert-px {
  background: black;
  width: 100px;
  height: 5px;
  margin-left: 1em;
}


body {
  margin: 1em;
}

* {
  box-sizing: border-box;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.