Why does changing the font size of a child element cause the flex container to deviate from its original position?

Question

This problem is very strange. It behaves differently on ordinary containers and flexible boxes.

Change the font size of the first child element:

• For ordinary containers, why does the height of the container change?
• For the flexible box, why does the flexible box move down or up at a certain distance?

How can I solve this problem? I want the flexbox not to move.

Supposedly, this only happens when changing the font size of the first child element. Changing the font size of the second child element is not important... 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

Suppose your first text has a font size of 50px and your second text has a font size of 0px, and you want to switch font sizes. At this point, the height of the content is 50px. In the middle of the animation, the font size of both texts changes to 25px, so the height of the content also changes to 25px. At the end of the animation you again have 50px and 0px font size, so the height of the content is 50px.

The height of the div will be adjusted according to the height of the content.

Answer 2

Please do not ask multiple questions in the same question.

The first question about "normal" (i.e. block-level) containers has been repeated. The issue of making paragraphs larger with the <small> tag has been discussed in detail.

For flexbox containers, this is determined by the way the flexcontainer determines its baseline. The relevant specification is stated below:

The default alignment of flex items is "stretch", which means that flex items do not participate in baseline alignment, so the first point does not apply.

The second point applies, meaning that the first flex item of each flex container provides the baseline against which the individual flex containers will be aligned.

The standard way to deal with this problem is to move inline-flex or inline-block container elements away from the baseline by setting vertical-align:top on them.