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>

Feel free to use this if you prefer: https://codepen.io/xsjctony/pen/RwqMdeV — Aelita, Jul 17 '23 at 14:59

score 1 · Accepted Answer · answered Jul 17 '23 at 19:41

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:

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.

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.)

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.

Sorry for putting multiple questions and thanks for the detailed answer! — Aelita, Jul 18 '23 at 01:48

score 0 · Answer 2 · answered Jul 17 '23 at 19:59

Let's say you have the first text at font-size:50px and the second at font-size:0px and you want to switch font-sizes. At this point the height of the content is 50px. In the middle of the animation, both texts have font-size:25px, so the content height is 25px too. At the end of the animation you have 50px and 0px again, so the content height is 50px.

The height of the div is adjusted to the height of the content.

score -1 · Answer 3 · answered Jul 17 '23 at 15:44

-1

because font also having its on size, we you increasing font size so size of container also increase, use rem in font size,

answered Jul 17 '23 at 15:44

Moindeen Pathan

1
2

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jul 22 '23 at 12:06

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

3 Answers3