【发布时间】：2017-06-24 04:26:57
【问题描述】：
在DIV 和overflow-y: auto 上呈现垂直滚动条应该是一个易于解决的问题，但在 IE 和 FireFox 之间呈现不同。简而言之，在 IE 中，滚动条出现在 DIV 之外，而在 FF 中，它在 DIV 中呈现。当项目接近列表中最长的项目时，这会导致在 FF 中的 DIV 中的项目出现不必要的包装（这反过来又会首先驱动 DIV 的宽度）。
这是 HTML 的 sn-p
<div class='helperList'>
<div class='helperListItem'>
<span>
Sample Data Item 1
<span class='helperItemExtraData'>
Data 1 Special Info
</span>
</span>
</div>
<div class='helperListItem'>
<span>
Sample Data Item 2
<span class='helperItemExtraData'>
Data 2 Special Info
</span>
</span>
</div>
</div>
helperList 的相关 CSS 是：
div.helperList{
display: flex;
flex-direction: column;
width: auto;
overflow-y: auto;
overflow-x: hidden;
height: 300px;
}
对于 helperItemExtraData：
span.helperItemExtraData{
float: right;
}
火狐渲染
IE11 渲染
现在，这是可重复使用的列表生成代码模块的一部分，该模块模拟自动完成功能的下拉列表。外部的两个 DIV（helperList、helperListItem）是自动生成的，我无法更改它们。我可以控制进入每个 helperListItem DIV 的项目的呈现。这个特殊项目的不寻常之处在于它包含两条信息，其目的是使第二条（“数据 X 特殊信息”）右对齐，呈现两列的外观。
从机制上讲，在渲染带有垂直滚动条的列表方面，它在 IE11 和 FF 中都能正常工作。但是，当 FF 渲染列表，并使框的宽度与最长的项目匹配，但 然后 将垂直滚动条插入 列表时，它会重新排列列表内容并在列表中最长项目的长度处或附近打破项目。相反，IE 将滚动条置于 DIV 之外，从而在所有情况下都正确呈现项目。
我需要停止 FF 中的项目的破坏/包装。到目前为止我已经尝试过 - 我会预先承认其中一些显然是可以达到的，坦率地说，我已经到了我确信我忽略了一个更简单的解决方案的地步（我的眼球正在转向茶包）：
- 使用 display: table-cell 渲染每个项目
- 在项目的末尾（然后到中间）添加一个 15 像素的空白
- 当列表的宽度和滚动宽度不同时，以编程方式向框添加 padding-right，这可能只发生在一个实例中
- 消除弹性容器/列设置
- 向项目和跨度添加“空白：nowrap”
在两种不同的浏览器中呈现差异的工作小提琴可在以下位置获得：
https://jsfiddle.net/ykv3tu41/1/
如果可能的话，我如何防止 FireFox 将该垂直滚动条放在列表 DIV 中，从而导致破坏项目？
我相信here 发布的问题正在处理一个非常相似（如果不相同？）的问题，但它没有答案。
编辑：我开始认为这可能是here描述的弹性盒问题。
【问题讨论】：
标签： html css internet-explorer firefox flexbox