CSS 弹性盒子可滚动列

Question

CSS 弹性盒子可滚动列

3

我正在尝试实现flexbox布局 - 示例图片和jsfiddle。在Chrome中工作正常，但在Firefox中不起作用。是否可能使用flexbox在Firefox中实现相同的行为？

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

编辑：感谢大家的回复！最后，对于我的特定情况，我采用了以下代码。min-height:0 用于滚动和额外宽度的文本不换行在 .l1，如果 .right 很小，保存 flex 行为，如果 .right 增长。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>

- Oleg Plotnikov

1

为了使布局在FF中正常工作，您需要向.content添加min-height: 0或overflow: hidden。请参阅重复内容以获取说明。为了使文本在FF中不换行，请向.l2添加white-space: nowrap。https://jsfiddle.net/rsrLx4zv/3/ - Michael Benjamin

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael Coker · Accepted Answer

在.content中添加overflow: hidden;似乎可以在跨浏览器的情况下实现相同的行为。

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