css - 嵌套 div，外层溢出滚动，内层被截断

Question

我有一些嵌套<div>的 s。外部<div>有overflow-x: scroll，内部有长文本（我不想换行）。问题是“内部”<div>实际上并没有扩展到滚动区域。例如，如果我有一个click绑定到每个 inner的<div>事件，如果您向右滚动并单击那里的任何位置，该事件将不会触发。在我的示例中，红色区域是内部<div>s 的一部分，而蓝色区域不是（因此在蓝色区域的任何位置单击都不会触发）。

（小提琴）

示例 HTML：

<div class="outer">
    <div class="inner">one long element right here</div>
    <div class="inner">two long element right here</div>
    <div class="inner">three long element right here</div>
</div>

还有一些简单的 CSS：

.outer {
    width: 15ex;
    overflow-x: scroll;
    background-color: blue;
}

.inner {
    white-space: nowrap;
    background-color: red;
}

（颜色用于说明目的）

Answer 1

我只在 Chrome 中尝试过，但它有效：

.inner {
    background-color: red;
    white-space: nowrap;
    display: table-row;
}

http://jsfiddle.net/tGkdn/5/

我几乎只是给了你一个 javascript 修复程序，我会在这里发布，以防万一不是跨浏览器。

var inner = document.querySelectorAll('.inner');
for ( var i = 0, l = inner.length; i < l; ++i ) {
    inner[i].style.width = inner[i].parentNode.scrollWidth + 'px';
}

Answer 2

强制性的 jQuery 答案：

工作示例

$(function () {
    $('.outer').scroll(function () {
        $('.inner').width($('.outer').width() + $('.outer').scrollLeft());
    });

    $('.inner').click(function () {
        $(this).css('background', 'green');
    });
});