html - 当我只有 2 个孩子时，如何将 flexbox 子级设置为父级高度（100%）

Question

我正在尝试为我的 flex 孩子增加 100% 的高度。它不工作。我知道我会给出方向，row但有时我只有 2 个孩子，我需要设置 100% 的高度。

可能吗？如果是这样，正确的方法是什么？

这是我的尝试：

*{
  padding:0;
  margin:0;
}

.parent{
  display:flex;
  height:100%;
  background:lightgray;
  border:1px solid red;
  flex-direction:row;
}

.child1{
  flex:0 0 30%;
  overflow-y: auto;
  background:lightblue;
}
.child2{
  flex:0 0 70%;
  overflow-y: auto;
  background:lightyellow;
}

<div class="parent">
  <div class="child1">child1</div>
  <div class="child2">child2</div>
</div>

现场演示

标签： htmlcss

Answer 1

您已将父高度设置为 100%。

您必须使用一些绝对单位设置高度。

检查下面的代码片段100vh

*{
  padding:0;
  margin:0;
}
header{
  height:100px;      
  background:gray;
}
.parent{
  display:flex;
  height:calc(100vh - 65px);
  background:lightgray;
  border:1px solid red;
  flex-direction:row;
}

.child1{
  flex:0 0 30%;
  overflow-y: auto;
  background:lightblue;
}
.child2{
  flex:0 0 70%;
  overflow-y: auto;
  background:lightyellow;
}

<header>
  <h2>Header goes here</h2>
</header>
<div class="parent">
  <div class="child1">child1</div>
  <div class="child2">child2</div>
</div>