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

Question

我的web-app有一个基于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>

我试过everthing我知道有关flexboxes，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

     

为了为flex项提供更合理的默认最小大小，此规范引入了一个新的自动值作为min-width和min-height属性的初始值

Answer 2

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

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

Result here