如何创建1列2行灵活盒布局？

Question

给出以下标记：

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

如何实现以下布局：

具有以下行为：

• A 的固定宽度为150px
• C 的高度取决于其内部高度（变化），但始终固定在底部。
• 弹性容器（ .box ）宽度占据浏览器的整个宽度。
• B 和 C 始终在 A ＆后占用容器的剩余宽度（ .box ） ＃39;宽度为150px。

  

A＆B和B的身高怎么样？它是固定的还是根据不同而变化的   内容还是其他什么？

A 内容的高度不会改变，但 B 内容的高度会发生变化。 .box 高度应等于最大值（高度 A ，高度 B + C ）

Here's a pen where everything is stubbed out

Answer 1

您的结果在概念上很简单，但您需要使用的不仅仅是3个连续元素才能实现您想要的效果。 Flex盒子是蜜蜂的膝盖，但它不会让你的布局变得神奇。您需要一个单独的子布局。

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