具有可滚动容器的复杂 flexbox 布局

Question

我的 Web 应用程序有一个基于 flexbox 的复杂布局，它有几个固定和可滚动的容器。

这应该是这样的：

整个布局为 100% 高度和宽度并自动展开。
绿色 div 的高度应为其父容器的 50%。
橙色的 div 应该可以滚动并展开到可能的最大高度。
蓝色 div 具有固定高度。

这里是代码的基本结构：

html,
body {
  height: 100%;
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex: 1;
  margin: 0;
}

* {
  box-sizing: border-box;
}

div {
  border: 1px solid black;
  text-align: center;
  margin: 5px;
  padding: 5px;
}

.flex {
  flex: 1;
}

.max-50 {
  max-height: 50%;
  background-color: green;
}

.column {
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
  flex-direction: row;
}

.scrollable {
  overflow: auto;
  background-color: orange;
}

.fixed {
  height: 30px;
  background-color: blue;
  color: white;
}

.sidebar {
  flex-basis: 250px;
}

#header {
  height: 40px;
}

<div class="column flex">
  <div class="fixed"> fixed </div>
  <div class="row flex">
    <div class="sidebar left scrollable">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur voluptatibus debitis vitae eveniet, cum expedita animi dolor odit natus vero minima esse modi impedit atque nostrum dolorum consequatur id error?
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam laboriosam mollitia, corporis nihil quaerat aperiam, tempore recusandae! Quis dolorem quibusdam, dolores, repudiandae, numquam voluptatem enim commodi eligendi sequi adipisci voluptatibus.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, magnam provident ea ullam temporibus laudantium non voluptates officia eos praesentium ipsam quis laboriosam? Aperiam veniam obcaecati rem at id minus.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat, corporis, nulla. Possimus, non maxime animi, veritatis necessitatibus ullam sed velit molestias voluptatem rem aperiam vero itaque voluptas ab fuga eum.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, aliquid, possimus neque at maxime pariatur quidem repellat nulla tempora nam reiciendis enim? Fugiat aspernatur incidunt voluptatum, in dolorum asperiores numquam!
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae nam minima consequatur distinctio nemo eaque dolorum ad, accusamus, nulla, odio hic debitis tempora, culpa non? Molestiae esse et perspiciatis officia?
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus minus necessitatibus, voluptas numquam quo natus, quas. Quod ad, fuga deleniti vero, reprehenderit odit harum, laboriosam quo maxime possimus, doloremque eligendi!
       </p>
    </div>
    <div class="column flex">
      <div class="fixed"> fixed </div>
      <div class="row flex">
        <div class="column flex scrollable">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
          </p>
        </div>  
        <div class="sidebar right column">
          <div class="flex max-50">
            <div class="scrollable flex">
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, nobis perspiciatis saepe deleniti optio repellat culpa minima ad odio, eos assumenda? Fuga debitis non tempore voluptatum quisquam, repellat, praesentium quaerat.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat eum distinctio aspernatur pariatur similique porro, quibusdam eius quis ipsum error cum itaque fugit quam repellat adipisci ratione aut iusto inventore?
              </p>
            </div>
          </div>
          <div class="flex max-50">
            <div class="fixed"> fixed </div>
            <div class="scrollable flex">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati culpa suscipit, unde tempora veniam repudiandae magni. Distinctio, totam eius sapiente tempore delectus adipisci quis, vel, maiores explicabo hic tempora facilis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore consectetur quasi sequi odio, magni laboriosam inventore iure. In temporibus qui, expedita ad, labore excepturi itaque quo eius aut numquam sunt?
            </div>
            <div class="fixed"> fixed </div>
            <div class="fixed"> fixed </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

我尝试了我所知道的关于 flexboxes 的一切，CSS 和 HTML，但我无法让它在所有最新版本的 IE、Firefox 和 Chrome 中工作。

重要说明：我对更改 html 结构非常有限，所以我很乐意找到仅 CSS 的解决方案。

有人能掌握这个吗？

Answer 1

您需要将以下 CSS 规则添加到 .max-50:

.max-50 {
    display: flex;
    flex-direction: column;
}

Result here

Answer 2

尝试添加 min-height: 0;

.flex {
  flex: 1;
  min-height: 0;
}

Updated pen

4.5. Implied Minimum Size of Flex Items

To provide a more reasonable default minimum size for flex items, this specification introduces a new auto value as the initial value of the min-width and min-height properties

具有可滚动容器的复杂 flexbox 布局

complex flexbox layout with scrollable containers

html

css

grid-layout

flexbox