Flex 元素未在 Flex 容器中填充 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;
}

看看下面的片段：

.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;
}

希望这可以帮助！