Почему добавление расширяет гибкий элемент?

В нижеприведенном фрагменте первая строка имеет два div с flex-grow: 1. Как и ожидалось, каждый div занимает 50% экрана.

При добавлении дополнения к левому div это уже не так. Может кто-нибудь объяснить, почему?

body > div {
  height: 50px;
  display: flex;
}
body > div > div {
  flex: 1;
  box-sizing: border-box;
}
#a {
  background-color: red;
}
#b {
  background-color: green;
}
#c {
  padding: 10px;
  background-color: blue;
}
#d {
  background-color: yellow;
}
<div>
  <div id="a"></div>
  <div id="b"></div>
</div>
<div>
  <div id="c"></div>
  <div id="d"></div>
</div>

Ответы

Ответ 1

Расчеты определены в спецификации.

Размер гибкого элемента с заполнением и flex-grow определяется расчетами в спецификации flexbox.

Эти вычисления аналогичны размерам гибких элементов с прокладкой и flex-shrink.

Честно говоря, математика достаточно технична и не самая легкая в мире, чтобы понять.

Но если вы хотите войти в нее, вот подробности:

Примеры

Ниже приведены примеры, которые, надеюсь, сделают поведение более ясным.

ПРИМЕЧАНИЕ. Имейте в виду, что flex-grow не является инструментом для непосредственного определения длины элемента flex. Это инструмент для распределения пространства в контейнере между элементами flex. Свойство flex-basis задает начальный основной размер элемента flex. Если flex-grow используется с flex-basis, проблема в вопросе решена (см. Пример № 4 ниже).

Пример №1

В блочном контейнере, где у вас есть box-sizing: border-box, поля в вашем коде будут равномерно отображаться независимо от заполнения.

body > div {
  height: 50px;
  /* display: flex; */
  font-size: 0; /* remove inline block whitespace */
}
body > div > div {
  /* flex: 1; */
  box-sizing: border-box;
  height: 50px;
  display: inline-block;
  width: 50%;
}
#a {
  background-color: red;
}
#b {
  background-color: green;
}
#c {
  padding: 10px;
  background-color: blue;
}
#d {
  background-color: yellow;
<div>
  <div id="a"></div>
  <div id="b"></div>
</div>
<div>
  <div id="c"></div>
  <div id="d"></div>
</div>

Ответ 2

Это, насколько мне известно, правильное поведение.

flex:1, конечно же, сокращает:

flex-grow:1;
flex-shrink:1;
flex-basis:0

Это позволяет div расти, если это необходимо, в этом случае. Он не будет автоматически поддерживать гибкие элементы как все одинаковые размеры, если они, по сути, разные.