<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>  
.container {
  padding-left: 100px;
}

.item {
  display: flex;
  padding: 1em;
  margin-bottom: 1.5em;
}

.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;
}



/* 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;  
}

.item {
  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.