我有一个CSS3 flexbox的问题.
如果我将flexbox元素overflow设置为并min-width为子元素设置值,则父元素上的右边填充将丢失?这在所有支持浏览器上都是一致的.
这是一个错误的例子.如果滚动到容器的右侧,您将看到最后一个孩子难以抵靠容器的右边缘,而不是遵守填充值.
.outer {
display: flex;
flex-direction: row;
width: 300px;
height: 80px;
border:1px #ccc solid;
overflow-x: auto;
padding: 5px;
}
.outer > div {
flex: 1 1 auto;
border: 1px #ccc solid;
text-align: center;
min-width: 50px;
margin: 5px;
}Run Code Online (Sandbox Code Playgroud)
<div class="outer">
<div>text1</div>
<div>text2</div>
<div>text3</div>
<div>text4</div>
<div>text5</div>
<div>text6</div>
<div>text7</div>
<div>text8</div>
<div>text9</div>
<div>text10</div>
</div>Run Code Online (Sandbox Code Playgroud)
有谁知道这是为什么以及如何纠正它?我搞砸周围padding,并margin在没有成功不同的组合值.
如果你看一下Chrome中这个小提琴:http://jsfiddle.net/up4Fa/
你会看到一个溢出的元素,里面有20px的填充!一切正常,按预期工作.
但是,如果您在IE9或Firefox中运行相同的测试,则底部的文本会触及容器的边缘,而底部的填充将被忽略...
如果我在内部div上执行填充就会出现问题,但是我宁愿用一个div来修复它并且无法理解为什么火狐和IE有问题而不是Chrome?
编辑:文本不是任何人想知道的原因!如果删除文本,它将对红色框执行相同操作.
谢谢