CSS flexbox可滾動列

我試圖實現flexbox佈局 - example img 和jsfiddle。適用於Chrome，但不適用於Firefox。使用flexbox可以在Firefox中實現相同的行爲嗎？CSS 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>

編輯：感謝所有的答覆！最後在我的具體情況下，我最終得到下面的代碼。如果.right很小，則min-height：0代表滾動，文本的額外寬度不包含.l1。如果.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>

來源

2017-05-25 Oleg Plotnikov

對於佈局在您需要添加'最小高度FF工作：0'或'溢出：hidden'爲'.content'。請參閱重複的說明。對於不包含在FF中的文本，將'white-space：nowrap'添加到'.l2'。 https://jsfiddle.net/rsrLx4zv/3/ –

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

來源

2017-05-25 21:24:24

謝謝！有用！但是又在Firefox中出現新的小bug。 .l2包裝中的內容，似乎是因爲滾動（也許我錯了）。 [jsfiddle]（https://jsfiddle.net/rsrLx4zv/1/） –

@OlegPlotnikov不客氣。你是什麼意思「內容在.l2換行」？他們在我看來和ff＆chrome一樣。 –

在previos評論中更新了小提琴。在一行中的鉻文本中，如果最後一個字移動到下一行。 –

CSS flexbox可滾動列

回答

相關問題