Question

我有一个固定高度的浮动div（class='outer'）与动态内容（class='inner'）。内容的尺寸不是预先知道的。浮动div的宽度必须灵活，但仍有一些最大值：

<style>
.outer {
    border: 1px solid;
    height: 200px;
    max-width: 400px;
    overflow: auto;
    float: left
}
.inner {
    height: 300px;
    width: 300px;
    background-color: red
}
</style>
<body>
<div class='outer'>
    <div class='inner'></div>
</div>
<span>Text here</span>
</body>

这通常有效;但是，如果内容高度过高，则会发生以下情况：

.outer假定内容的宽度，因为它低于max-width。
.inner被强制转换为height的{{1}}，因此会出现垂直滚动条。
.outer被强制转换为新的约束宽度，因为.inner不会再次调整大小以容纳滚动条。
结果显示完全不必要的水平滚动条。

小提琴： https://jsfiddle.net/w053kLkw/

有没有办法阻止.outer的这种机制并且只在需要时出现两个滚动条？

Answer 1

在CSS AFAIK中不可能（你需要JS，或者你不应该使用浮动！）。

当您float项目时，它会从正常block formatting context中移除。浮动项目不会尊重max-width，因为它会缩小到其内容 - 因此需要指定width到outer。

当我同时设置width: 400px时，请看下面会发生什么。

＆＃13;

*{
  box-sizing: border-box;
  }
.outer {
    border: 1px solid;
    height: 200px;
    max-width: 400px;
    width: 400px;
    overflow: auto;
    float: left;
}
.inner {
    height: 300px;
    width: 300px;
    background-color: red;
}

＆＃13;

<body>
<div class='outer'>
    <div class='inner'></div>
</div>
<div style="clear: both;"></div>
<span>Text here</span>
</body>

＆＃13;

解释：

根据W3C规范，应始终为浮动元素指定宽度（replaced elements除了具有隐式宽度的图像之外）。否则我们会看到不可预测的行为。

请参阅本节link中的浮动项目是否需要宽度？。

如果未设置宽度，则结果可能无法预测。从理论上讲，a 具有未定义宽度的浮动元素应缩小到最宽其中的元素。这可能是一个单词，一个句子甚至一个单词字符 - 结果因浏览器而异。

这意味着outer将采用inner的宽度 - 并且overflow不是visible浏览器的行为符合其认为合适。

防止浮动div的子节点不必要的水平滚动

1 个答案: