CSS flexbox scrollable column

Question

I'm trying to implement flexbox layout - example img and jsfiddle. Works in Chrome but not in Firefox. Is it possible to achieve the same behavior in Firefox using flexbox?

.page {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 200px;
  background-color: white;
}

.content {
  display: flex;
}

.left {
  background-color: lightgreen;
  display: flex;
  flex-direction: column;
}

.l1 {
  flex: 1;
}

.l2 {
  background-color: steelblue;
  overflow-y: auto;
}

.right {
  background-color: red;
}

<div class="menu">Menu</div>
<div class="page">
  <div class="top">Top</div>
  <div class="content">
    <div class="left">
      <div class="l1"> <br><br><br>Left1 <br><br><br></div>
      <div class="l2"> <br><br><br>Left2 <br><br><br></div>
    </div>
    <div class="right">Right</div>
  </div>
</div>

EDIT: Thanks all for reply! Finally in my particular case i end up with following code. min-height:0 for scroll and extra width for the text no wrap in .l1 if .right is small and save flex behavior if .right grows. jsfddle

.page {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 200px;
  background-color: white;
}
.content,
.left {
  display: flex;
  min-height: 0; /* NEW */
}
.left {
  flex-direction: column;
  padding-right: 20px; /* NEW */
}
.l1, .l2 {
  width: calc(100% + 20px); /* NEW */
}
.l1 {
  background-color: lightgreen;
  flex: 1;
}
.l2 {
  background-color: steelblue;
  overflow-y: auto;
}
.right {
  background-color: red;
  flex: 1;
}

<div class="menu">Menu</div>
<div class="page">
  <div class="top">Top</div>
  <div class="content">
      <div class="left">
          <div class="l1"> <br><br><br>Left1 <br><br><br></div>
          <div class="l2">
              <table>
                  <tbody>
                      <tr><td>Left2 Left2 Left2 Left2 Left2 Left2</td></tr>
                      <tr><td>Left2 Left2 Left2 Left2 Left2 Left2</td></tr>
                      <tr><td>Left2 Left2 Left2 Left2 Left2 Left2</td></tr>
                      <tr><td>Left2 Left2 Left2 Left2 Left2 Left2</td></tr>
                      <tr><td>Left2 Left2 Left2 Left2 Left2 Left2</td></tr>
                      <tr><td>Left2 Left2 Left2 Left2 Left2 Left2</td></tr>
                      <tr><td>Left2 Left2 Left2 Left2 Left2 Left2</td></tr>
                  </tbody>
              </table>

          </div>
      </div>
      <div class="right">Right Right Right Right</div>
  </div>
</div>

For the layout to work in FF you need to add `min-height: 0` or `overflow: hidden` to `.content`. See the duplicate for the explanation. For the text not to wrap in FF, add `white-space: nowrap` to `.l2`. https://jsfiddle.net/rsrLx4zv/3/ — Michael Benjamin, May 26 '17 at 00:41

score 2 · Accepted Answer · answered May 25 '17 at 21:24

2

Adding overflow: hidden; to .content seems to give the same behavior cross-browser.

.page {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 200px;
  background-color: white;
}

.content {
  display: flex;
  overflow: hidden;
}

.left {
  background-color: lightgreen;
  display: flex;
  flex-direction: column;
}

.l1 {
  flex: 1;
}

.l2 {
  background-color: steelblue;
  overflow-y: auto;
}

.right {
  background-color: red;
}

<div class="menu">Menu</div>
<div class="page">
  <div class="top">Top</div>
  <div class="content">
    <div class="left">
      <div class="l1"> <br><br><br>Left1 <br><br><br></div>
      <div class="l2"> <br><br><br>Left2 <br><br><br></div>
    </div>
    <div class="right">Right</div>
  </div>
</div>

answered May 25 '17 at 21:24

Michael Coker

52,626
5
64
64

Thanks! it works! But appear new little bug in firefox again. Content in .l2 wrap, it seems because of scroll (maybe i'm wrong). [jsfiddle](https://jsfiddle.net/rsrLx4zv/1/) – Oleg Plotnikov May 25 '17 at 21:55
@OlegPlotnikov you're welcome. What do you mean "content in .l2 wrap"? they look the same in ff & chrome to me. – Michael Coker May 25 '17 at 21:57
Updated fiddle in previos comment. In chrome text in one line, in ff last word moves to the next line. – Oleg Plotnikov May 25 '17 at 22:06
[Example with table on jsfiddle](https://jsfiddle.net/rsrLx4zv/2/) – Oleg Plotnikov May 25 '17 at 22:08
@OlegPlotnikov sorry, not seeing it. they look the same (chrome on left, ff on right) http://i.imgur.com/xlMMdWL.png – Michael Coker May 25 '17 at 22:11
I use FF 53.0.3 and when scrollbar appears it take some space http://prntscr.com/fcahze. Currently find how to fix it for my case, i updated the question. Thank you again) – Oleg Plotnikov May 26 '17 at 10:07

CSS flexbox scrollable column

1 Answers1