带有滚动条的绝对定位容器内的宽度问题答案

【问题标题】：Width issue within an absolute positioned container with a scrollbar带有滚动条的绝对定位容器内的宽度问题
【发布时间】：2014-08-01 17:05:09
【问题描述】：

Demo jsFiddle

我的问题是：

如果我将max-height 影响到绝对定位的.rc-datalist 容器，则会出现一个滚动条：这是预期的行为。

但是这个容器的最长的孩子出错了：最后一个字符隐藏在滚动条下。（我在 jsFiddle 中突出显示了这一行）

当我添加一个右浮动元素时，它变得越来越糟糕，正如你所看到的......

请问，有人知道如何修复/破解这种奇怪但跨浏览器的行为吗？我只是希望.rc-datalist 在出现滚动条时稍微大一点。

信息：

没有 javascript，只有 CSS（我知道如何用 javascript 修复它）
.rc-datalist absolute position 是强制性的，我不想为其指定数字宽度。
.rc-option 元素的内容可以更改或包装。我只需要保持.rc-datalist 和.rc-options 之间的父子关系。在.rc-options 内，我不在乎，只要它能完成工作！

【问题讨论】：

标签： css width scrollbar absolute

【解决方案1】：

从.rc-option 中删除white-space:nowrap，离开：

.rc-option {
    padding:0 0.5em;
}

Demo Fiddle

【讨论】：

谢谢。我忘了告诉：我想保持原始状态。出现滚动时有没有办法让.rc-datalist 元素变大？

【解决方案2】：

我终于自己找到了解决办法。

Fixed Demo jsFiddle

通过添加：

.rc-option:before {
    float :right;
    width:1.5em;
    content:'';
    display:inline-block
}

它默认放大每一行（即使没有滚动条）但保持突出显示效果。

是的！我知道这是可能的。

【讨论】：

【解决方案3】：

如果您遇到滚动问题，请尝试 overflow-x : scroll 和 overflow-y : scroll 如果你想让隐藏的文字在它的背景之上，尝试更高的z-index;，例如z-index:100

如果你的孩子的背景宽度是自动的，尝试填充为padding: 1px

您可以在以下位置学习这些内容：

http://www.w3schools.com/cssref/css3_pr_overflow-x.asp
http://www.w3schools.com/cssref/css3_pr_overflow-y.asp
http://www.w3schools.com/cssref/pr_pos_z-index.asp
http://www.w3schools.com/cssref/pr_padding.asp

【讨论】：

感谢您的帮助，但您的建议根本不起作用。建议之前你在 jsFiddle 上试过了吗？
@M'sieurToph' 我的回答并不是为了提供一个准备好的蛋糕，而是一个建议。我的建议是 CSS 的常见参考，它们有望在您的问题上派上用场。此外，还提供了学习链接，以便您可以获取更多信息并尝试使用您的代码。由于其他领域的 CSS，您的代码的行为可能与预期不同。谢谢。
我不是新手。我知道填充、z-index 等多年。在问这里之前，我尝试了所有相关的组合。我的问题有点技术性，我确认：您的建议不起作用（正如我在阅读它们时所想的那样）。