Pourquoi la modification de la taille de la police d'un élément enfant entraîne-t-elle un écart du conteneur flexible par rapport à sa position d'origine ?

Question

Ce problème est très étrange, il se comporte différemment sur les conteneurs normaux et les flexbox.

Modifiez la taille de la police du premier élément enfant :

• Pour les conteneurs ordinaires, pourquoi la hauteur du conteneur change-t-elle ?
• Pour la boîte à élastiques, pourquoi cela fait-il descendre ou monter la boîte à élastiques à une certaine distance ?

Comment puis-je résoudre ce problème ? Je veux que la flexbox ne bouge pas.

Soi-disant, cela ne se produit que lors de la modification de la taille de la police du premier élément enfant. Changer la taille de la police du deuxième élément enfant n'est pas important... pourquoi ?

* {
  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

Supposons que votre premier texte ait une taille de police de 50 px et que votre deuxième texte ait une taille de police de 0 px, et que vous souhaitiez changer de taille de police. À ce stade, la hauteur du contenu est de 50 px. Au milieu de l'animation, la taille de la police des deux textes passe à 25 px, donc la hauteur du contenu passe également à 25 px. À la fin de l'animation, vous avez à nouveau une taille de police de 50 px et 0 px, donc la hauteur du contenu est de 50 px.

La hauteur du div sera ajustée en fonction de la hauteur du contenu.

Answer 2

Veuillez ne pas poser plusieurs questions dans la même question.

La première question sur les conteneurs « normaux » (c'est-à-dire au niveau du bloc) a été dupliquée. Le problème de l'agrandissement des paragraphes avec la balise <small> a été discuté en détail.

Pour les conteneurs flexibles, cela est déterminé par la façon dont le conteneur flexible détermine sa ligne de base. La spécification pertinente est indiquée ci-dessous :

L'alignement par défaut des éléments flexibles est "stretch", ce qui signifie que les éléments flexibles ne participent pas à l'alignement de la ligne de base, donc le premier point ne s'applique pas.

Le deuxième point s'applique, ce qui signifie que le premier élément flexible de chaque conteneur flexible fournit la ligne de base par rapport à laquelle les conteneurs flexibles individuels seront alignés.

La manière standard de résoudre ce problème consiste à éloigner les éléments de conteneur inline-flex ou inline-block de la ligne de base en définissant vertical-align:top dessus.