CSS: Flexbox parent shrink to fit wrapping children

A CSS only example of how to make a parent flex div shrink to fit when child flex divs wrap.

HTML

<div class="bug-row">
  <div class="bug-container">
    <div class="bug-icon">
      &#129419;
    </div>
    <div class="bug-description">
      This is a Butterfly
    </div>
  </div>
  <div class="bug-container">
    <div class="bug-icon">
      &#128029;
    </div>
    <div class="bug-description">
      This is a Honeybee
    </div>
  </div>
  <div class="bug-container">
    <div class="bug-icon">
      &#128030;
    </div>
    <div class="bug-description">
      This is a Ladybug
    </div>
  </div>
  <div class="bug-container">
    <div class="bug-icon">
      &#128027;
    </div>
    <div class="bug-description">
      This is a Caterpillar
    </div>
  </div>
  <div class="bug-container">
    <div class="bug-icon">
      &#128375;
    </div>
    <div class="bug-description">
      This is a Spider
    </div>
  </div>
</div>

SCSS

.bug-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0.75rem 1.5rem;
  border: 1px solid blue;
  background: lightblue;
  font-size: 2rem;
  max-width: 50rem;
  margin: 0 auto;
  
  .bug-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 4rem;
    flex: auto;
    padding: 0.5rem 0 0 0.5rem;
 
    
    .bug-description {
      width: 3.75rem;
      flex: auto;
      padding: 0 0.5rem;
      font-size: 0.75rem;
      line-height: 1.2;
      text-align: center;
    }
  }
}