防止浮动 div 的子级不必要的水平滚动答案

【问题标题】：Prevent unnecessary horizontal scrolling for child of a floated div防止浮动 div 的子级不必要的水平滚动
【发布时间】：2017-09-03 11:11:34
【问题描述】：

我有一个固定高度的浮动 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 的 .outer 并因此出现垂直滚动条。
.inner 被强制设置为新的受约束宽度，因为 .outer 不会再次调整大小以适应滚动条。
结果出现了完全不必要的水平滚动条。

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

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

【问题讨论】：

你试过.outer {display:table;}吗？
@Roysh 这似乎覆盖了height: 200px，我没有得到想要的垂直滚动
你能发布一些示例内容吗？
@Roysh 我已经发布了小提琴
尝试使用display:inline-block; 而不是float:left; jsfiddle.net/w053kLkw/2

标签： html css css-float

【解决方案1】：

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

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

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

*{
  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;
}

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

解释：

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

请参阅以下部分：浮动项目需要宽度吗？在此link。

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

这意味着outer 将采用inner- 的宽度，并且由于overflow 不是visible，浏览器会按照它认为合适的方式运行。

【讨论】：

这不能回答我的问题。您的代码的结果不是预期的结果。另外，max-width与所描述的问题无关。
@Roman AFAIK 除非您对 overflow: hidden 感到满意，否则您无法在纯 css 中解决它，或者您在这里使用 JS
事实上可能是这样。我想了很久的解决方案，但没有想出任何办法。因此，我想问，如果其他人可以。如果不可能，我会去JS。
编辑你的答案，说明不可能实现这一点，我会投票赞成。
我认为，你是对的，用 CSS 是不可能的。但是，我不认为原因在于浮动。我尝试了不同的组合，得出的结论是滚动条的呈现取决于浏览器，不可能通过 CSS 甚至 JS 来干扰这个过程（至少以一种很好和简单的方式）。