<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="https://satyr.dev/200x125/58563a" alt="Satyr.io dummy image" width="200" height="125" />   

  </p>

  <div class="item__right">

    <h2>width: 100px</h2>  

  </div>    

</div>  

​

<div class="item item--flex-basis">

  <p class="item__left">

    <img src="https://satyr.dev/200x125/58563a" alt="Satyr.io dummy image" width="200" height="125" />   

  </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>  

​