Why does changing the children's font size cause the flex container to offset from original place

Question

This issue is weird, acts differently on normal containers and flexbox.

Changing the font-size of the FIRST children:

• for NORMAL CONTAINER, why is it changing the container's height?
• for FLEXBOX, why is it making the flexbox move down or up for some distance?

How do I resolve this? I want the FLEXBOX not to move.

To be said, it's only happening when changing font-size of first children. Changing the second doesn't matter... why?

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #121212;
  color: #fff;
  font-size: 20px;
}

.container {
  line-height: 48px;
  font-size: 36px;
  border: 1px solid #f90;
}

.first {
  color: #ffe47e;
  animation: change1 3s linear infinite;
}

@keyframes change1 {
  0%,
  100% {
    font-size: 0.1em;
  }
  50% {
    font-size: 1em;
  }
}

@keyframes change2 {
  0%,
  100% {
    font-size: 0.1em;
  }
  50% {
    font-size: 2em;
  }
}

.c2 {
  display: inline-flex;
  column-gap: 5px;
}

.c2 .first {
  font-size: 0.5em;
  animation: change2 3s linear infinite;
} 

.c3 .first {
  font-size: 0.5em;
  animation: none;
}

<div style="margin-bottom: 50px;">
  <div class="container c2 c3">
    <span class="first">first</span>
    Second
  </div>
  
  <div class="container c2 c3">
    Second
    <span class="first">This doesn't matter</span>
  </div>
  
  (flexbox) How to make the first flex container align with the second one?
</div>

<div style="margin-bottom: 50px;">
  (flexbox) Animation illustration
  
  <div class="container c2">
    <span class="first">first</span>
    Second
  </div>
  
  <div class="container c2">
    Second
    <span class="first">This doesn't matter</span>
  </div>
</div>

(normal container) Animation illustration - Why is height changing?

<div class="container">
  <span class="first">first</span>
  Second
</div>

Answer 1

Please don't put multiple questions into the same SO question.

Your first question about "normal" (i.e. block) containers is a duplicate. It's thoroughly covered by <small> tag makes height of paragraph larger

For the flexbox container, this is covered by how the flex containers determine their baselines. The relevant specification says:

8.5. Flex Container Baselines

first/last main-axis baseline set

When the inline axis of the flex container matches its main axis, its baselines are determined as follows:

1. If any of the flex items on the flex container’s startmost/endmost flex line participate in baseline alignment, the flex container’s first/last main-axis baseline set is generated from the shared alignment baseline of those flex items.

2. Otherwise, if the flex container has at least one flex item, the flex container’s first/last main-axis baseline set is generated from the alignment baseline of the startmost/endmost flex item. (If that item has no alignment baseline parallel to the flex container’s main axis, then one is first synthesized from its border edges.)

3. Otherwise, the flex container has no first/last main-axis baseline set, and one is synthesized if needed according to the rules of its alignment context.

The default alignment for flex items is "stretch", which means that the flex-items are not participating in baseline alignment, and point 1 does not apply.

Point 2 applies and means that the first flex item in each flex container provides the baseline on which each of the flex containers will align will each other.

The standard way of dealing with this is to take the inline-flex or inline-block container elements off the baseline by giving them vertical-align:top.