Flex items shrinking in Firefox, but not Chrome or IE

Question

I was trying to understand a complex layout with flexbox for the sidebar. The page is generated by angular 2 framework. The sidebar is divided by two parts. The bottom part is simple but top part is little bit complex and it is changed based on the page content.

The sidebar is working perfect in Chrome and IE-11 but it is not working as expected in Firefox 51.0.1(32-bit). You can see the layout in the image below.

Does Firefox renders differently for Flexbox? How to fix this problem for Firefox?

One can see the code here 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>

score 2 · Accepted Answer · edited May 23 '17 at 12:25

An initial setting of a flex container is flex-shrink: 1. This means that flex items will, by default, shrink to avoid overflowing the container. That's the problem you're having. In your column-direction container, flex items are reducing their height to stay within the container.

Make this adjustment to your code:

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

Better yet, if you want your height declarations to be exact and consistent across browsers, try this:

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

More details here:

What are the differences between flex-basis and width? (see section The flex-shrink Factor)
7.2.2. The flex-shrink property

Flex items shrinking in Firefox, but not Chrome or IE

1 Answers1