时间戳

首页 > 解决方案 > 较大的 flex 子项导致先前兄弟的填充被忽略

html - 较大的 flex 子项导致先前兄弟的填充被忽略

问题描述

所以我有一个 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>

您可以在第二个示例中看到标题的高度大大降低了。

标签： htmlcssflexbox

解决方案

这是因为您使用的是 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;
}

推荐阅读