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

【问题标题】：How do you create a 1-column, 2-row flex-box layout?如何创建 1 列 2 行 flex-box 布局？
【发布时间】：2016-02-10 09:25:02
【问题描述】：

给定以下标记：

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

如何实现如下布局：

具有以下行为：

A 的宽度固定为 150 像素
C 的高度基于其内部内容的高度（会发生变化），但始终保持固定在底部。
flex 容器 (.box) 的宽度占据了浏览器的整个宽度。
B 和 C 总是占据 A 的 150px 之后的容器 (.box) 的剩余宽度宽度被考虑在内。

A 和 B 的身高呢？它是固定的还是取决于内容还是其他？

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

Here's a pen where everything is stubbed out

【问题讨论】：

A 和 B 的身高呢？它是固定的还是根据内容或其他内容而变化？
绝对？ codepen.io/gc-nomade/pen/egBAK 或额外的标记 codepen.io/gc-nomade/pen/xtjhD ?
谢谢@GCyrillus，您的第二个解决方案满足除了嵌套弹性框之外的条件，这只是浏览器兼容性方面的一个问题。
@oneday 我在问题中澄清了

标签： css flexbox

【解决方案1】：

您的结果在概念上很简单，但您需要使用不止 3 个连续的元素来完成您想要的。弹性盒子是蜜蜂的膝盖，但它不能让你的布局变幻。您需要一个单独的子布局。

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

【讨论】：