Question

我在使用CSS3 flex显示和溢出时遇到了麻烦。如果内容在y轴上溢出，我想要一个“可滚动”的框，如果内容在x轴上溢出，我想要“x-overflowed”。

我发现this codepen说明了如何设置y-scrollable框，我分叉this one来说明我的问题。如您所见（使用Chrome），即使overflow-x设置为visible，也会添加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;，它应该没问题。

CSS3：Flex显示和溢出

1 个答案: