This flexbox is misbehaving in Firefox and Edge

Question

In this example, there is an outer container which is flexbox and one of its children (the bottom one) is also a flexbox. My goal is that the top part grows according to its contents and bottom fills the remainder. Bottom-left part grows according to its contents and bottom-right fills the remainder of the bottom. Also, the right-bottom part has more content that it can fit so it should have a scrollbar which scrolls only the bottom-right part. The example works as expected in Chrome 66 and Safari 11.1 but doesn't in Firefox 59 and Edge. In that case the bottom grows beyond the viewport. How do I fix that ?

https://jsfiddle.net/6y2mm6hv/

body
 {
  margin: 0;
  padding: 0;
  height: 100vh;
  overflow: hidden;
 }  
  
  .container
  {
 display: flex;
 flex-direction: column;
 height: 100%;
  }
  
  .top
  {
 padding: 10px;
 flex: 0 0 auto;
 background-color: royalblue;
 border: 2px solid yellow;
  }
  
  .bottom
  {
 flex: 1 1 auto;
 background-color: whitesmoke;
 border: 2px solid red;
 padding: 10px;
 display: flex;
  }
  
  .left
  {
    width: 600px;
 flex: 0 0 auto;
  }
  
  .right
  {
 flex: 1 1 auto;
 overflow-y: scroll;
  }
  
  .bottom .line
  {
 font-size: 20px;
 padding: 10px;
  }

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>undefined</title>
</head>
<body>
 <div class="container">
  <div class="top">
   <input/><button>Button</button><span>Some text</span>
  </div>
  <div class="bottom">
   <div class="left">
    <span>Left</span>
   </div>
   <div class="right">
    <div class="line">Line</div>
    <div class="line">Line</div>
    <div class="line">Line</div>
    <div class="line">Line</div>
    <div class="line">Line</div>
    <div class="line">Line</div>
    <div class="line">Line</div>
    <div class="line">Line</div>
    <div class="line">Line</div>
    <div class="line">Line</div>
    <div class="line">Line</div>
    <div class="line">Line</div>
    <div class="line">Line</div>
    <div class="line">Line</div>
    <div class="line">Line</div>
    <div class="line">Line</div>
    <div class="line">Line</div>
    <div class="line">Line</div>
    <div class="line">Line</div>
    <div class="line">Line</div>
    <div class="line">Line</div>
    <div class="line">Line</div>
    <div class="line">Line</div>
    <div class="line">Line</div>
    <div class="line">Line</div>
    <div class="line">Line</div>
    <div class="line">Line</div>
    <div class="line">Line</div>
    <div class="line">Line</div>
    <div class="line">Line</div>
    <div class="line">Line</div>
    <div class="line">Line</div>
    <div class="line">Line</div>
    <div class="line">Line</div>
    <div class="line">Line</div>
    <div class="line">Line</div>
   </div>
  </div>
 </div>
</body>
</html>

This? https://jsfiddle.net/hf8qcgx4/4/ – Michael Benjamin May 02 '18 at 19:59 — Michael Benjamin, May 02 '18 at 19:59
@Michael_B yup, seems fine, let me figure it out – Maciej Szpakowski May 02 '18 at 20:00 — Maciej Szpakowski, May 02 '18 at 20:00
`min-height: 0` for the bottom is the answer. Thank you – Maciej Szpakowski May 02 '18 at 20:05 — Maciej Szpakowski, May 02 '18 at 20:05
See the duplicate for a complete explanation. – Michael Benjamin May 02 '18 at 20:07 — Michael Benjamin, May 02 '18 at 20:07

score 0 · Answer 1 · answered May 02 '18 at 19:41

0

give vendor specific styles to it..

display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
 -ms-flex-direction: column;
         flex-direction: column;
 height: 100%;

answered May 02 '18 at 19:41

jyotishman saikia

2,079
1
15
11

Can you write a complete example ? I tried adding these styles but it didn't work. – Maciej Szpakowski May 02 '18 at 19:47
Please write down your problem code to codepen or fiddle. I will solve it for sure. – jyotishman saikia May 02 '18 at 19:50

This flexbox is misbehaving in Firefox and Edge

1 Answers1