时间戳

首页 > 解决方案 > 高度设置为 0 的全高弹性项目

css - 高度设置为 0 的全高弹性项目

问题描述

我有以下代码用于使用 flexbox 进行开发。

#container {
  display: flex;
  justify-content: space-around;
  width: 100%;
}

.content {
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  height: 400px;
  width: 400px;
}

#item1 {
  background-color: red;
  flex-grow: 1;
  height: 0;
}

#item2 {
  background-color: green;
  flex-grow: 1;
  height: 100px;
}

#item3 {
  background-color: blue;
  flex-grow: 1;
  height: 900px;
}
<div id="container">
  <div class="content">
    <div id="item1"></div>
  </div>
  
  <div class="content">
    <div id="item2"></div>
  </div>
  
  <div class="content">
    <div id="item3"></div>
  </div>
</div>

我知道该设置flex-grow: 1会占用其父级的剩余空间。然而，height无论它的价值是多少，该属性似乎都没有效果。

标签： css

解决方案

原因是您的 flex-direction 设置为 column，这意味着 flex-grow 从上到下做出反应，因此 flex-grow 响应的是高度而不是宽度。

另一个问题是，为什么 flex-direction 是列，但是宽度被填满了，因为它是一个显示为块的 <div>，宽度被自动填充display: block;

推荐阅读