title: Flexbox container slightly taller than its contents
body: <p>I have a flex container with 4 columns/flex items, each containing an image of the same size/proportions with the max-width set to 100%. Columns have an overflow property set to hidden since I want to scale images on hover but don't want them to expand outside their column's &quot;boundaries&quot;. However, the container's height is 382px while the image height is 379.5px leaving a subtle gap of 2.5px on the bottom when hovering image. Please refer to the modified screenshot below (red line marks the bottom edge of the container, second/lighter image is in hover state) as well as the code.</p>
  <p>I've tried setting the flex container's align-items property to center and I've tried removing whitespace in HTML, among other things, to no avail. I am trying to wrap my head around what might be causing this discrapency. From what I understand, the height of elements in CSS is determined by their children so I don't get why it's 382px in the first place if the height of each image is 379.5px.</p>
  <p>Any help would be greatly apprecaited, thank you!</p>
  <p>P.S. I'm using Eric Meyer's CSS reset.</p>
  <p><a href="https://i.stack.imgur.com/4xNQJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4xNQJ.png" alt="Red line marks the bottom edge of the flex container pronouncing the discrapancy of the container's height with the height of its children" /></a></p>
  <pre><code>&lt;div class=&quot;flex&quot;&gt;
      &lt;div class=&quot;flex-item&quot;&gt;
          &lt;img src=&quot;./img/img01.jpg&quot; alt=&quot;Image&quot;&gt;
      &lt;/div&gt;
      &lt;div class=&quot;flex-item&quot;&gt;
          &lt;img src=&quot;./img/img02.jpg&quot; alt=&quot;Image&quot;&gt;
      &lt;/div&gt;
      &lt;div class=&quot;flex-item&quot;&gt;
          &lt;img src=&quot;./img/img03.jpg&quot; alt=&quot;Image&quot;&gt;
      &lt;/div&gt;
      &lt;div class=&quot;flex-item&quot;&gt;
          &lt;img src=&quot;./img/img04.jpg&quot; alt=&quot;Image&quot;&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <pre><code>.flex {
      display: flex;
      column-gap: 1em;
  }
  
  .flex-item {
      flex: 1;
      overflow: hidden;
  }
  
  .flex-item &gt; img {
      max-width: 100%;
      transform: scale(1);
      transition: all 0.2s ease-in-out;
  }
  
  .flex-item:hover &gt; img {
      transform: scale(1.125);
  }
  </code></pre>