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

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

Flex容器的初始设置为flex-shrink: 1。这意味着默认情况下，flex项会缩小以避免容器溢出。那就是你遇到的问题。在列方向容器中，flex项目会降低其高度以保持在容器内。

对您的代码进行此调整：

.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