如何创建 1 列 2 行 flex-box 布局？

Question

鉴于以下标记：

<div class="box">
  <div class="A">A</div>
  <div class="B">B</div>
  <div class="C">C</div>
</div>

我如何实现以下布局：

具有以下行为：

• A 的固定宽度为 150px
• 的高度Ç是基于它里面的内容（其改变）的高度，但是它总是保持固定至底部。
• flex 容器 ( .box ) 宽度占据浏览器的整个宽度。
• 在考虑A的 150px 宽度后，B和C总是占用容器的剩余宽度（.box）。

A和B的身高怎么样？它是固定的还是因内容或其他原因而异？

A里面内容的高度不会改变，但是B里面内容的高度会改变。.box高度应等于 max(height A , height B + C )

这是一支笔，所有东西都被剔除

Answer 1

您的结果在概念上很简单，但您需要使用超过 3 个连续元素来完成您想要的。Flex box 是蜜蜂的膝盖，但它不能神奇地改变你的布局。您需要一个单独的子布局。

HTML

<div class="box flex">
  <div class="a">A</div>
  <div class="b-c flex column">
    <div class="b">B</div>
    <div class="c"></div>
  </div>
<div>

CSS

.box {
  display: flex;
  align-items: stretch;
  width: 100vw;
}
.a {
  flex: 0 0 150px;
}
.b-c {
  flex-direction: column;
  display: flex;
  flex-grow: 1;
}