相关疑难解决方法(0)

显示:Flex溢出时会失去正确的填充?

我有一个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在没有成功不同的组合值.

html css css3 flexbox winjs

21
推荐指数
3
解决办法
5272
查看次数

底部填充不适用于非Chrome浏览器中的溢出元素

如果你看一下Chrome中这个小提琴:http://jsfiddle.net/up4Fa/

你会看到一个溢出的元素,里面有20px的填充!一切正常,按预期工作.

但是,如果您在IE9或Firefox中运行相同的测试,则底部的文本会触及容器的边缘,而底部的填充将被忽略...

如果我在内部div上执行填充就会出现问题,但是我宁愿用一个div来修复它并且无法理解为什么火狐和IE有问题而不是Chrome?

编辑:文本不是任何人想知道的原因!如果删除文本,它将对红色框执行相同操作.

谢谢

css

14
推荐指数
1
解决办法
7499
查看次数

标签 统计

css ×2

css3 ×1

flexbox ×1

html ×1

winjs ×1