使用 flex-direction 的全高：列 [重复]

【问题标题】：Full height using flex-direction: column [duplicate]使用 flex-direction 的全高：列 [重复]
【发布时间】：2022-01-30 16:23:25
【问题描述】：

我希望我的 c1 被完全拉伸，但我想知道为什么当我应用 flex:1 时它没有填满空间。

.wrap {
  display:flex;
  flex-direction: column;
}

.c1 {
  background: red;
  flex: 1;
}

.c2 {
  background: blue;
}

<div class='wrap'>
  <div class='c1'>
    <div>child 1</div>
    <div>more content</div>
   </div>
  <div class='c2'>child 2</div>
</div>

【问题讨论】：

标签： html css

【解决方案1】：

在您的包装类中，您必须添加高度。

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

.c1 {
  background: red;
  flex: 1;  
}

.c2 {
  background: blue;
}

<div class='wrap'>
  <div class='c1'>
    <div>child 1</div>
    <div>more content</div>
   </div>
  <div class='c2'>child 2</div>
</div>

【讨论】：