Scenario 1: flex-basis 200px each (1/3 of total width)
<div class="flex-parent">  
    <div class="flex-item-fill">spoons</div>
    <div class="flex-item-fill">forks</div>
    <div class="flex-item-fill">knives</div>
</div>


Scenario 2: flex-basis 100px each
<div class="flex-parent">  
    <div class="flex-item">spoons</div>
    napkins
    <div class="flex-item">forks</div>
    chopsticks 
    <div class="flex-item">knives</div>
    thingamabob
</div>

<br />

Scenario 3
ONE TAKES MORE SPACE
<br/>
note that there are no changes in
flex-grow or flex-shrink
<div class="flex-parent">  
    <div class="flex-item">
       <div class="large"></div>
    </div>
    chopsticks
    <div class="flex-item">forks</div>
    <div class="flex-item">knives</div>
</div>


Scenario 4 Overflow
<div class="flex-parent">  
    <div class="flex-item">
       <div class="large2"></div>
    </div>
    chopsticks
    <div class="flex-item">forks</div>
    napkins
    <div class="flex-item">knives</div>
    thingamabob
</div>
.flex-parent {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  
   background-color: sienna;
   border: 1px solid red;
  
   height: 100px;
   width: 600px; 
}

.flex-item-fill {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 200px;  /* MODIFY ME*/
  
    box-sizing: border-box;
  
    background-color: blue;
  color: white;
    border: 1px solid red;
}

.flex-item {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 100px;  /* MODIFY ME*/
  
    box-sizing: border-box;
    background-color: blue;
  color: white;
    border: 1px solid red;
}

.large, .large2 {
   white-space: nowrap;
}
document.querySelector(".large").innerHTML = "spoon spoonspoonspoonspoonspoonspoon spoon  ";

document.querySelector(".large2").innerHTML = "spoon spoonspoonspoonspoonspoonspoon spoon  ";

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.