CSS flexbox scrollable column

Question

CSS flexbox scrollable column

I am trying to implement flexbox layout - img and jsfiddle example . Works in Chrome, but not 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>

Run code Hide result

EDIT: Thanks everyone for the answer! Finally, in my particular case, I end up with the following code. min-height: 0 for scrolling and extra width for non-wrap text in .l1 if .right is small and retains flexible 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>

Run code Hide result

+3

css flexbox

Oleg Plotnikov May 25 '17 at 21:15

source to share

1 answer

Michael coker · Accepted Answer · 2017-05-25T21:24:24+0000

Adding overflow: hidden;

to is .content

like cross-browser with the same behavior.

.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>

Run code Hide result

CSS flexbox scrollable column

More articles: