CSS Flex box. height and Firefox

Question

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
  min-height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  
}

header {
  flex: 1;
  height: 60px;
  background: lightblue;
  padding: 0;
  margin: 0;
}

header p {
  text-align: center;
}

.main-wrap {
  display: flex;
  flex: 1 1 auto;
  width: 1000px;
  background: lightgreen;
  margin: 0 auto;
  
  height: 100%;
}



.right-pane {
  display: inline-flex;
  flex: 1 1 auto;
  flex-direction: column;
  background: #76DAFF;
}

.right-head {
  text-align: center;
  height: 40px;
  flex: 1;
  background-color: #DDCA7E;
}

.right-body {
  background-color: #B9F;
  display: inline-flex;
  flex: 1 1 auto;
  overflow-y: auto;
}

<html>

<body>
  <header>
    <p>I am a fixed header</p>
  </header>
  <div class="main-wrap">
   
    <div class="right-pane">
      <div class="right-head">
        <p>I am a fixed container</p>
      </div>
      <div class="right-body">
        <ul>
          <li>Scroll me I am famous!</li>
          <li>Scroll me I am famous!</li>
          <li>Scroll me I am famous!</li>
          <li>Scroll me I am famous!</li>
          <li>Scroll me I am famous!</li>
          <li>Scroll me I am famous!</li>
          <li>Scroll me I am famous!</li>
          <li>Scroll me I am famous!</li>
          <li>Scroll me I am famous!</li>
          <li>Scroll me I am famous!</li>
          <li>Scroll me I am famous!</li>
          <li>Scroll me I am famous!</li>
          <li>Scroll me I am famous!</li>
          <li>Scroll me I am famous!</li>
          <li>Scroll me I am famous!</li>
          <li>Scroll me I am famous!</li>
          <li>Scroll me I am famous!</li>
          <li>Scroll me I am famous!</li>
          <li>Scroll me I am famous!</li>
          <li>Scroll me I am famous!</li>
          <li>Scroll me I am famous!</li>
          <li>Scroll me I am famous!</li>
          <li>Scroll me I am famous!</li>
          <li>Scroll me I am famous!</li>
          <li>Scroll me I am famous!</li>
          <li>Scroll me I am famous!</li>
          <li>Scroll me I am famous!</li>
          <li>Scroll me I am famous!</li>
          <li>Scroll me I am famous!</li>
          <li>Scroll me I am famous!</li>
          <li>Scroll me I am famous!</li>
          <li>Scroll me I am famous!</li>
          <li>Scroll me I am famous!</li>
          <li>Scroll me I am famous!</li>
          <li>Scroll me I am famous!</li>
          <li>Scroll me I am famous!</li>
          <li>Scroll me I am famous!</li>
          <li>Scroll me I am famous!</li>
          <li>Scroll me I am famous!</li>
          <li>Scroll me I am famous!</li>
          <li>Scroll me I am famous!</li>
          <li>Scroll me I am famous!</li>
          <li>Scroll me I am famous!</li>
          <li>Scroll me I am famous!</li>
          <li>Scroll me I am famous!</li>
          <li>Scroll me I am famous!</li>
          <li>Scroll me I am famous!</li>
          <li>Scroll me I am famous!</li>
          <li>Scroll me I am famous!</li>
          <li>Scroll me I am famous!</li>
          
        </ul>
      </div>
    </div>
  </div>
</body>

</html>

This snippet works as expected on safari9 and Chrome but ffox fails. I am trying not to have the main scrollbar showing on the page.

It looks like the height 100% takes the first header into account.

True, `min-height: 0;` did solve it on `.main-wrap`. Thank you! — coulix, Feb 19 '16 at 21:02

score -1 · Answer 1 · edited May 23 '17 at 11:53

-1

Used min-heigh on the scroll parent.

.main-wrap {
  display: flex;
  flex: 1 1 auto;
  width: 1000px;
  background: lightgreen;
  margin: 0 auto;

  height: 100%;
}

As Rendering problems using flexbox in Firefox and Chrome 48

edited May 23 '17 at 11:53

Community

1
1

answered Feb 19 '16 at 21:03

coulix

3,328
6
55
81

1

Hm. Answering your own question which is a duplicate..... – random_user_name Feb 19 '16 at 21:05
1

There are several ways of exposing a same problem. – coulix Feb 19 '16 at 21:15

CSS Flex box. height and Firefox

1 Answers1