[英]CSS3 : Flex display and overflow
I'm having trouble using CSS3 flex display and overflow. 我在使用CSS3 flex显示和溢出时遇到了麻烦。 I'd like a box to be "y-scrollable" if contents overflow on y-axis and "x-overflowed" if content overflows on x-axis.
如果内容在y轴上溢出,并且如果内容在x轴上溢出则“x-overflowed”,我想要一个“可滚动”的框。
I found this codepen illustrating how to set the box y-scrollable and I forked this one to illustrate my problem. 我发现这个codepen说明了如何设置y-scrollable框,我分叉这个来说明我的问题。 As you can see (using Chrome), a x-scrollbar is added even if overflow-x is set to visible.
如您所见(使用Chrome),即使overflow-x设置为visible,也会添加x滚动条。 I hoped content would overflow upon the y-scrollbar and be visible without x-scrollbar...
我希望内容会溢出y滚动条并且在没有x滚动条的情况下可见...
Any solution ? 有解决方案吗
The base HTML code is 基本的HTML代码是
<ul>
<li><div>Item</div></li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
The base CSS code is 基本的CSS代码是
ul {
flex: 1;
min-height: 0;
overflow: auto;
}
And, to make trouble, replace by 并且,为了制造麻烦,请替换
ul {
flex: 1;
min-height: 0;
overflow-x: visible ;
overflow-y: auto;
}
div{
background-color : red ;
width : 150% ;
}
For make it really revealant, add 为了让它真的很有启发性,请添加
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%; }
I could be reading this wrong, but if you're not wanting there to be a horizontal scroll bar, then you can set overflow-x: hidden;
我可能读错了,但是如果你不想要有一个水平滚动条,那么你可以设置
overflow-x: hidden;
and it should be okay. 它应该没问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.