html - 具有可滚动容器的复杂 Flexbox 布局

Question

我的网络应用程序有一个复杂的基于 Flexbox 的布局，其中有几个固定和可滚动的容器。

它应该是这样的:

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

这是代码的基本结构:

<强> Show on codepen

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>

我尝试了我所知道的有关 Flexbox、CSS 和 HTML 的所有方法，但无法让它在所有最新版本的 IE、Firefox 和 Chrome 中运行。

重要说明:我对更改 html 结构的能力非常有限，因此我很高兴找到一个仅使用 CSS 的解决方案。

有人能掌握这个吗？

Answer 1

尝试添加 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