1

UPDATE: I'm not convinced this is a duplicate question. While the implied minimum size of flex content might be causing the issue, I still am curious why I'm getting different results in Chrome and Firefox.

I'm working on a project with nested flexboxes, where one of the nested divs has overflowing content and should scroll. I have it working just as expected in Chrome and Safari, but both Firefox and Edge behave differently.

Here's the jsFiddle: https://jsfiddle.net/e3p6xk0L/4/

Also, here's the code / example inline

body {
  padding: 0px;
  margin: 0px;
}

div {
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: blue;
  position: relative;
}

.top {
  flex-basis: 40px;
  background: purple;
}

.middle {
  display: flex;
  flex: 1;
  background: orange;
}

.bottom {
  flex-basis: 40px;
  background: yellow;
}
.left {
  flex-basis: 20px;
  background: green;
}

.center {
  flex: 1;
  background: red;
}

.right {
  flex-basis: 200px;
  background: orange;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 10px;
}

.right-content {
  height: 1000px;
  background: gray;
}
<div class='container'>
  <div class='top'>
  
  </div>
  <div class='middle'>
    <div class='left'>
    </div>

    <div class='center'>
    </div>

    <div class='right'>
      <div class='right-content'>
      </div>
    </div>
  </div>
  <div class='bottom'>
    
  </div>
</div>

Basically, there should always be a purple bar of fixed height at the top, and a yellow bar of fixed height on the bottom. The gray content, which overflows the right div, should only cause that right div to scroll.

Does anyone see anything obvious that I'm doing incorrectly?

Paul Sweatte
  • 24,148
  • 7
  • 127
  • 265
erlloyd
  • 485
  • 6
  • 20
  • Add `min-height: 0` to `.middle`. https://jsfiddle.net/e3p6xk0L/5/ – Michael Benjamin Oct 12 '16 at 14:32
  • That's close, but it still is different in Firefox vs Chrome. If you notice, in Firefox, the padding (visible as the orange border) on .right isn't visible if you scroll all the way down to the bottom. – erlloyd Oct 12 '16 at 14:48
  • Also, I understand why 'min-height: 0' works, but I still wonder why I'm seeing different results between Chrome and Firefox. Is there a bug in one browser's implementation? – erlloyd Oct 12 '16 at 14:50
  • Flexbox is a relatively new technology (CSS3). There are differences in implementation between browsers. I see the padding issue you mention. It could be a bug, it could be a different interpretation of spec language. – Michael Benjamin Oct 12 '16 at 15:01
  • What's clear is this: Instead of `padding: 10px` on the parent, use `margin: 10px` on the child. That seems to work cross-browser. https://jsfiddle.net/e3p6xk0L/7/ – Michael Benjamin Oct 12 '16 at 15:03
  • The answers here may also shed some light: http://stackoverflow.com/q/40030370/3597276 – Michael Benjamin Oct 16 '16 at 13:32

0 Answers0