CSS3：Flex顯示和溢出

我在使用CSS3 flex顯示和溢出時遇到問題。如果內容在y軸上溢出，並且如果內容在x軸上溢出，則我想要一個盒子是「y-scrollable」，如果內容在y軸上溢出則爲「x-overflowed」。CSS3：Flex顯示和溢出

我發現this codepen說明如何設置框y-scrollable和我分叉this one來說明我的問題。正如您所看到的（使用Chrome），即使overflow-x設置爲可見，也會添加x滾動條。我希望內容會在y滾動條上溢出，並在沒有x滾動條的情況下可見...

任何解決方案？

基本HTML代碼

<ul> 
     <li><div>Item</div></li> 
     <li>Item</li> 
     <li>Item</li> 
     <li>Item</li> 
    </ul>

底座CSS代碼

ul { 
    flex: 1; 
    min-height: 0; 
    overflow: auto; 
}

而且，鬧事，通過

ul { 
    flex: 1; 
    min-height: 0; 
    overflow-x: visible ; 
    overflow-y: auto; 

} 

div{ 
    background-color : red ; 
    width : 150% ; 
}

更換爲使它真正revealant，加

ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    background: hsl(200,100%,90%); 
} 

li { padding: 20px; } 

li:nth-child(odd) { background: hsl(200,100%,85%); } 

header, footer { padding: 20px; background: hsl(0,0%,70%); } 

body { 
    display: flex; 

    /* doesn't work without prefix */ 
    -webkit-flex-flow: column; 
    flex-flow: column; 

    height: 100%; 
    box-sizing: border-box; 
    padding: 20px; 
    background: hsl(0,0%,80%); 
} 

html { height: 100%; }

來源

2014-06-12 valoulol

你的問題很好解釋，如果你還在這裏發佈你的相關代碼，如果鏈接將來死亡，你的問題將不會對未來的訪問者有用，它會更好.. –

這是它！謝謝！ – valoulol

我會幫你重新標記以便你看到一些看法 –

我可能會讀這個錯誤，但如果你不想有一個水平滾動條，那麼你可以設置overflow-x: hidden;，它應該沒問題。

來源

2014-12-31 14:01:57

CSS3：Flex顯示和溢出

回答

相關問題