html - 如何在固定容器内使用 flexbox？

Question

我有一个 div，它在视口(viewport)内 position: fixed;。其中有一系列使用 display: flex; 的子元素，我需要一个可滚动元素来填充 flexed 元素 100% 的高度。我遇到的问题是，因为可滚动元素的父元素的 done 具有固定高度，所以可滚动元素只是插入了 flex 元素的底部而不是滚动。

请看下面的 JSBin 例子。在此示例中，蓝色 block 需要扩展到红色 block 高度的 100%，而蓝色 block 的内容仍可滚动。需要在 IE10+、最新的 Firefox 和 Chrome 中工作:

https://jsbin.com/terimim/edit?html,css,output

Answer 1

有两个主要问题导致布局问题。它们分别在这里解释:

• Why doesn't flex item shrink past content size?
• Chrome / Safari not filling 100% height of flex parent

revised demo

* {
  box-sizing: border-box;
  min-height: 0;
}

body {
  background-color: #eaeaea;
}

#menu {
  background-color: #fff;
  position: fixed;
  top: 20px;
  right: 20px;
  left: 20px;
  bottom: 20px;
  padding: 0;
  z-index: 12;
  height: calc(100vh - 40px);
}

#menu-contents {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#menu-pane-wrapper {
  display: flex;
  flex: 1;
  background-color: #eeffcc;
}

#menu-panes {
  flex: 1;
  display: flex;
}

.menu-pane {
  box-sizing: border-box;
  background-color: #ff0000;
  width: 20%;
  padding: 10px;
  display: flex;
}

.menu-pane-overflow {
  flex: 1;
  overflow-x: hidden;
  overflow-y: scroll;
  background-color: aqua;
}

.menu-item {
  padding: 5px;
}

<div id="menu">
  <div id="menu-contents">
    <div id="menu-header">HEADER</div>
    <div id="menu-pane-wrapper">
      <div id="menu-panes">
        <div class="menu-pane">
          <div class="menu-pane-overflow">
            <div class="menu-pane-scroll">
              <div class="menu-item">1</div>
              <div class="menu-item">2</div>
              <div class="menu-item">3</div>
              <div class="menu-item">4</div>
              <div class="menu-item">5</div>
              <div class="menu-item">6</div>
              <div class="menu-item">7</div>
              <div class="menu-item">8</div>
              <div class="menu-item">9</div>
              <div class="menu-item">10</div>
              <div class="menu-item">11</div>
              <div class="menu-item">12</div>
              <div class="menu-item">13</div>
              <div class="menu-item">14</div>
              <div class="menu-item">15</div>
              <div class="menu-item">16</div>
              <div class="menu-item">17</div>
              <div class="menu-item">18</div>
              <div class="menu-item">19</div>
              <div class="menu-item">20</div>
              <div class="menu-item">21</div>
              <div class="menu-item">22</div>
              <div class="menu-item">23</div>
              <div class="menu-item">24</div>
              <div class="menu-item">25</div>
              <div class="menu-item">26</div>
              <div class="menu-item">27</div>
              <div class="menu-item">28</div>
              <div class="menu-item">29</div>
              <div class="menu-item">30</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>