较大的flex儿童会导致前一个兄弟的填充被忽略

Question

所以我有一个弹性盒，但我很难理解为什么当第二个孩子的内容溢出时，第一个孩子的填充被忽略的原因。

这是第二个孩子的内容没有溢出的例子。

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;
}