How do you create a 1-column, 2-row flex-box layout?

Question

Given the following markup:

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

How do I achieve the following layout:

With the following behavior:

• A has fixed width of 150px
• Height of C is based on the height of the content inside of it (which changes), but it always remains fixed to the bottom.
• The flex container (.box) width takes up the full width of the browser.
• B and C always take up the remaining width of the container (.box) after A's 150px of width is taken into account.

What about A's and B's height? Is it fixed or it varies depending on the content or something else?

The height of the content inside of A will not change, but the height of the content inside of B will change. .box height should equal max(height A, height B + C)

Here's a pen where everything is stubbed out

Answer 1

Your result is conceptually simple, but you need to use more than just 3 consecutive elements to accomplish what you want. Flex box is the bee's knees but it can't magic your layout. You need a separate sub-layout.

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