CSS Firefox v36 及更高版本中的 Flexbox 问题

Question

我正在尝试使用 CSS Flexbox（显示：flex）来占据 window 的剩余高度。我也想要滚动可用...也许我一直在做这个错误，但一直在寻找其他选项已经让我望而却步。

想法是有一个固定的容器。在那个固定容器内是一个 flexbox，它占据了 100% 的高度。我将项目添加到堆叠在一列中的弹性框中。我添加的最后一项（容器包装器）内部有动态内容，将通过 AJAX 调用替换 HTML（否则我只需将操作栏移到包装器外并完成它）。这个内容包装器也是一个弹性容器（以及一个弹性项目），并设置为随着 window 的高度增长和收缩。随着 window 收缩，这个 flex 容器的最后一项应该允许滚动。

Demo here.

<!-- The fixed container -->
<div class="fixed">
    <!-- The first flex container - direction: column -->
    <div class="outer">
        <div class="some-flex-item"></div>
        <div class="some-flex-item"></div>
        <!-- Grow and shrink with 100% of height -->
        <div class="container-wrapper">
            <!-- inner HTML is dynamic -->
            <!-- flex: 0 0 auto -->
            <div class="action-bar"></div>

            <!-- Want this div to take up remaining height of window
                 and have overflow-y scrolling -->
            <div class="container">
                ...
            </div>
        </div>
    </div>
</div>

似乎在 IE 10+ 中工作，Chrome，但 Firefox 没有添加滚动条，因为 container-wrapper 的高度由于内部内容而无限增长。我应该提到旧版本的 Firefox 显示正确（我认为 ~33），但更新版本没有。

我找到了一个解决方法，我将内部容器位置设置为：相对，然后将其内部内容包装在一个 div 中，并将顶部、左侧、底部、右侧的绝对定位设置为 0。 Example here。我不喜欢这样，因为它似乎违背了 flexbox 布局的目的。有没有什么方法可以让这个概念在浏览器中很好地发挥作用，而无需进行标记修改？

Answer 1

添加这个：

.container-wrapper {
    min-height: 0;
}

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
html, body {
  margin: 0;
  height: 100%;
}
.fixed {
  position: fixed;
  top: 60px;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 400px;
}
.outer {
  border: 1px solid black;
  height: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
}
.outer > * {
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}
.container-wrapper {
  -ms-flex: 1 1 100%;
  flex: 1 1 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  min-height: 0;
}
.action-bar {
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  border-top: 1px solid silver;
  border-bottom: 1px solid silver;
  padding: 20px;
  text-align: right;
}
.container {
  -ms-flex: 1 1 100%;
  flex: 1 1 100%;
  overflow-y: auto;
}
.list {
  display: -ms-flexbox;
  display: flex;
  padding-top: 10px;
  padding-bottom: 10px;
  border: 1px solid aqua;
}
.display-name {
  -ms-flex: 1 1 100%;
  flex: 1 1 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-right: 8px;
}
.display-date {
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

<div class="fixed">
  <div class="outer">
    <div>
      <p>Title</p>
    </div>
    <!-- The inner contents of container-wrapper is dynamic so I cannot
simply move the action-bar item outside -->
    <div class="container-wrapper">
      <div class="action-bar">
        <button>I don't do anything but occupy space</button>
      </div>
      <!-- Firefox allows this element to grow beyond the remaining space of the container-wrapper
thus expanding the height of the container-wrapper and not allowing scroll -->
      <div class="container">
        <div class="list">
          <div class="display-name">
            Display Name
          </div>
          <div class="display-date">
            Mar 31, 2015
          </div>
        </div>
        <div class="list">
          <div class="display-name">
            Really long name that should be truncated. I don't know
          </div>
          <div class="display-date">
            Mar 31, 2015
          </div>
        </div>
        <div class="list">
          <div class="display-name">
            Display Name
          </div>
          <div class="display-date">
            Mar 31, 2015
          </div>
        </div>
        <div class="list">
          <div class="display-name">
            Display Name
          </div>
          <div class="display-date">
            Mar 31, 2015
          </div>
        </div>
        <div class="list">
          <div class="display-name">
            Display Name
          </div>
          <div class="display-date">
            Mar 31, 2015
          </div>
        </div>
      </div>  
    </div>
  </div>
</div>

你需要它，因为 Flexbox 模块改变了 min-height 的初始值：

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 defined in CSS 2.1.

CSS Firefox v36 及更高版本中的 Flexbox 问题

CSS Flexbox Issue in Firefox v36 and Greater

css

firefox

flexbox