Flex 项目在 Firefox 中缩小，但不是 Chrome 或 IE

Question

我试图用侧边栏的 flexbox 来理解复杂的布局。该页面由 Angular 2 框架生成。侧边栏分为两部分。下半部分简单，上半部分有点复杂，根据页面内容变化。

侧边栏在 Chrome 和 IE-11 中运行良好，但在 Firefox 51.0.1（32 位）中无法正常运行。您可以在下图中看到布局。

Firefox 对 Flexbox 的渲染是否不同？如何解决 Firefox 的这个问题？

可以在这里查看代码http://plnkr.co/edit/N1W0r9An60oooItLzRQ9?p=preview

app {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: auto;
  border: 1px solid black;
}

#app__optimize {
  background: red;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 560px;
  height: 240px;
}

#app__panel {
  position: fixed;
  top: 40px;
  left: 0;
  bottom: 240px;
  width: 560px;
}

.page__holder {
  height: 100%;
}

.page__main-container {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: white;
}

.page__main-header {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  height: 60px;
  color: white;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  background: blue;
}

.page__optimized {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100%;
  background: gray;
}

.page__main-panel {
  padding: 16px;
  overflow-y: auto;
  overflow-x: hidden;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

.page__main-footer {
  height: 80px;
  background-color: yellow;
  padding: 16px;
}

<app>

  <div id='app__panel'>
    <choose-stops-page>
      <page>
        <div class="page__holder">
          <div class="page__main-container">
            <div class="page__main-header">
              page__main-header
            </div>
            <div class="page__optimized">
              <breadcrumb style="height: 112px; background:red">
                breadcrumb
              </breadcrumb>
              <div class='page__main-content-bar' style='height:84px; background:yellow'>
                page__main-content-bar
              </div>
              <div class='page__main-panel'>
                page__main-panel
                <ul>
                  <li>test</li>
                  <li>test</li>
                  <li>test</li>
                  <li>test</li>
                  <li>test</li>
                  <li>test</li>
                  <li>test</li>
                  <li>test</li>
                  <li>test</li>
                  <li>test</li>
                  <li>test</li>
                  <li>test</li>
                  <li>test</li>
                  <li>test</li>
                  <li>test</li>
                  <li>test</li>
                  <li>test</li>
                  <li>test</li>
                  <li>test</li>
                  <li>test</li>
                  <li>test</li>
                  <li>test</li>
                  <li>test</li>
                  <li>test</li>
                  <li>test</li>
                  <li>test</li>
                  <li>test</li>
                  <li>test</li>
                  <li>test</li>
                  <li>test</li>
                  <li>test</li>
                  <li>test</li>
                  <li>test</li>
                  <li>test</li>
                  <li>test</li>
                  <li>test</li>
                  <li>test</li>
                  <li>test</li>
                  <li>test</li>
                  <li>test</li>
                  <li>test</li>
                  <li>test</li>
                  <li>test</li>
                  <li>test</li>
                  <li>test</li>
                  <li>test</li>
                  <li>test</li>
                  <li>end</li>
                </ul>
              </div>
              <div class='page__main-footer'>
                page__main-footer
              </div>
            </div>
          </div>
        </div>
      </page>
    </choose-stops-page>
  </div>
  <div id='app__optimize'>
    app__optimize
  </div>
</app>

Answer 1

弹性容器的初始设置是flex-shrink: 1。这意味着弹性项目将默认收缩以避免溢出容器。这就是你遇到的问题。在您的列方向容器中，弹性项目正在降低它们的高度以保持在容器内。

对您的代码进行此调整：

.page__main-footer {
    height: 80px;
    background-color: yellow;
    padding: 16px;
    flex-shrink: 0; /* new */
}

更好的是，如果您希望您的 height 声明在浏览器中准确且一致，请尝试以下操作：

breadcrumb {
    /* height: 112px; */
    flex: 0 0 112px; /* don't grow, don't shrink, stay fixed at 112px height */
    background:red;
}

.page__main-content-bar {
    /* height: 84px; */
    flex: 0 0 84px;
    background:yellow;
}

.page__main-footer {
    /* height: 80px; */
    flex: 0 0 80px;
    background-color: yellow;
    padding: 16px;
}

revised demo

更多细节在这里：

• What are the differences between flex-basis and width?（参见 flex-shrink 因素部分）
• 7.2.2. The flex-shrink property