CSS flexbox可滚动列

Question

我正在尝试实施flexbox布局 - example img 和jsfiddle。 适用于Chrome，但不适用于Firefox。是否可以使用flexbox在Firefox中实现相同的行为？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

编辑：谢谢大家的回复！最后在我的特定情况下，我最终得到以下代码。 min-height：0表示滚动，额外宽度表示文本没有换行.l1如果.right很小，如果.right增长则保存弹性行为。 jsfddle

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

将overflow: hidden;添加到.content似乎会在跨浏览器中提供相同的行为。

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