2

I have a "complex" layout made mostly with flexbox, if you open this link: http://jsbin.com/miyuwuyepu/1/edit?html,css,output Scroll completely to the bottom, you'll see the correct behaviour in Chrome but in Firefox the top bar disappears from the view (the entire page scrolls).

Is this behaviour a bug in Firefox? Is there a workaround? Is it the correct behaviour but I'm missing something or doing something I shouldn't?

html,
body,
.container {
  width: 100%;
  height: 100%;
  margin: 0;
  font-size: 10px;
}

.container {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin: 0;
}

.header {
  background-color: yellow;
  width: 100%;
  height: 3rem;
  flex-shrink: 0;
}

.content {
  background-color: aqua;
  width: 100%;
  height: 100%;
  padding-top: 0.1rem;
  display: flex;
  padding: 0;
}

.side-bar {
  background-color: green;
  height: 100%;
  width: 5rem;
  flex-shrink: 0;
}

.boxes {
  overflow: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.box {
  height: 8rem;
  width: 8rem;
  background-color: red;
  margin: 1rem;
  flex-shrink: 0;
}
<div class="container">
  <div class="header"></div>
  <div class="content">
    <div class="side-bar"></div>
    <div class="boxes">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
  </div>
</div>
Hidden Hobbes
  • 13,893
  • 3
  • 38
  • 64
Mathius17
  • 2,412
  • 2
  • 21
  • 33
  • I'm using FF 53.0.2 (32-bit) and don't see the problem. The yellow header stays in place. – Gerard May 11 '17 at 14:40
  • I'm using FF 53.x (64-bit) on Mac and Ubuntu and I see the problem on both. Maybe you didn't scroll all the way? Have you tried scrolling by putting the cursor on top of the green bar instead of the blue section? – Mathius17 May 11 '17 at 15:07
  • You need to add `min-height: 0` to `.content` ([revised demo](http://jsbin.com/jopizeburu/1/edit?html,css,output)). – Michael Benjamin May 11 '17 at 16:03
  • That's exactly what I was looking for! Thank you so much. If you post it as an answer I'll gladly accept it. – Mathius17 May 11 '17 at 16:29

1 Answers1

0

I could reproduce the issue. Please change the CSS for the header class:

.header {
  background-color: yellow;
  width: 100%;
  height: 3rem;
  flex-shrink: 0;
  position: fixed;
}
Gerard
  • 15,418
  • 5
  • 30
  • 52
  • It doesn't exactly fixes the issue. If do what you suggested, then the `.content` div moves to the top, and If I put a padding or a margin to it, or even to the `.container`, the issue is back – Mathius17 May 11 '17 at 15:37