больший изгиб, вызывающий игнорирование отступа предыдущего родного брата

Question

Итак, у меня есть flexbox, но мне трудно понять, почему отступы первого дочернего элемента игнорируются, когда содержимое второго дочернего элемента переполняется.

вот пример, когда содержимое второго дочернего элемента не переполняется.

body {
  padding: 0;
  margin: 0;
}

.flex {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
}

.title {
  background-color: green;
  border-bottom: 10px solid black;
  display: flex;
  height: 50px;
  padding-bottom: 40px;
}

.body {
  background-color: blue;
  flex: 1;
}

.content {
  background-color: red;
  height: 10vh;
}

<div class="flex">
  <div class="title">

  </div>
  <div class="body">
    <div class="content">

    </div>
  </div>
</div>

Вот пример, когда содержимое дочернего элемента переполнено

body {
  padding: 0;
  margin: 0;
}

.flex {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
}

.title {
  background-color: green;
  border-bottom: 10px solid black;
  display: flex;
  height: 50px;
  padding-bottom: 40px;
}

.body {
  background-color: blue;
  flex: 1;
}

.content {
  background-color: red;
  height: 100vh;
}

<div class="flex">
  <div class="title">

  </div>
  <div class="body">
    <div class="content">

    </div>
  </div>
</div>

Вы можете видеть во втором примере, что высота заголовка значительно уменьшилась.

Answer 1

Это потому, что вы используете flex css, который пытается вместить всех детей.Если заголовок не должен меняться в размере, несмотря ни на что, вам нужно установить его flex-shrink на 0.

Так что попробуйте изменить css на:

.title {
  background-color: green;
  border-bottom: 10px solid black;
  display: flex;
  height: 50px;
  padding-bottom: 40px;
  flex-shrink: 0;
}