html - CSS3 : Flex display and overflow

Question

我在使用 CSS3 flex 显示和溢出时遇到问题。如果内容在 y 轴上溢出，我希望一个框是“y-scrollable”，如果内容在 x 轴上溢出，我希望它是“x-overflowed”。

我找到了 this codepen说明如何设置框 y-scrollable 和我 fork 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% ;
}

为了让它真正暴露，添加

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

Answer 1

我可能读错了，但如果你不想有一个水平滚动条，那么你可以设置 overflow-x: hidden;应该没问题。