柔性元件在柔性容器中不会填满100％的高度

Question

我有以下标记：

.container {
  display: flex;
  width: 500px;
}

.col1 {
  background: red;
  height: 100%;
  width: 50px;
}

.col2 {
  background: blue;
  flex: 1;
  height: 200px;
}

<div class="container">
  <div class="col1"></div>
  <div class="col2"></div>
</div>

我希望它看起来像这样：

但是，当在浏览器中呈现并进行检查时，.col1的高度为0px。我希望它是200px，因为.col2将容器的高度拉伸到该大小。我做错了什么？

Answer 1

从height: 100%删除.col1，例如：

.col1 {
    background: red;
    width: 50px;
}

请看下面的代码段：

.container {
    display: flex;
    width: 500px;
}
.col1 {
    background: red;
    width: 50px;
}
.col2 {
    background: blue;
    flex: 1;
    height: 200px;
}
body {
    margin: 0;
}

<div class="container">
    <div class="col1"></div>
    <div class="col2"></div>
</div>

希望这有帮助！