Question 209988 in Html Question posted in
Some basic documentation can be found here.

Html – Why does changing the children's font size cause the container's height to change as well

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>
Tags:

4

Answers


  1. 0

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

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
  3. 0

    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.

    Login or Signup to reply.
  4. 0

    every div has height of auto by default, so it will stretch to contain elements inside unless you prevent it. you can uses css below to stop this height change

    .container {
    height: 50px !important;
}

    ** body also have height:auto; so its height will still change due to width change in elements causing some element get pushed down.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search