css - 另一个带有 "white-space: nowrap;"的 div 的背景不覆盖所有宽度

Question

好的，我遇到了一个问题。简而言之，这里是 a fiddle .我会在这里重复一遍:

HTML:

<div class="container">
        <div class="selected">
            <span>Why don't you cover all the width!?</span>
        </div>
        <div>
            <span>Little content</span>
        </div>
</div>

CSS:

.container {
    width: 100px;
    white-space: nowrap;
    background-color: #0f0;
    overflow-x: auto;
    height: 200px;
}

.selected {
    background-color: #f00;
    white-space: nowrap;
}

第一个问题是:为什么内部div的背景没有覆盖整个span？第二个:我当然想要修复。

还有一件事:html 元素是由第三方工具生成的，我无法访问它，这使得“将其全部包装在另一个 div 中”变得不可能。只有 CSS，只有铁杆!

更新:

顺便说一句，容器本身是可调整大小的(准确地说是 frameset 内的 frame)。

编辑:

我已经更新了 the fiddle为了提供更多信息。问题是，当第二个 div 被选中时，我希望红色背景能够拉伸(stretch)到最长行的宽度。

更新 2:

上述问题可以通过 display: table-row; 解决(参见 here )。棘手的是，即使内容比容器本身 ( a fiddle ) 更窄，也要让它工作。

Answer 1

默认情况下，div 有 width:auto。所以内部 div 和外部一样都是 100px 宽。 span 溢出了 div。

在这种特殊情况下，最简单的解决方案是给内部 div display:inline-block

div div {display:inline-block}

因此它不再适合其父级，但它会根据其内容的宽度塑造自己。

Updated fiddle .

编辑:回答你的第二个问题:是的，display:inline-block 阻止 selected div 与容器一样宽。
幸运的是，可以通过添加

min-width:100%;

除了显示:内联 block 。参见 more updated fiddle .

另一个编辑:
而且问题一直在变。现在是关于框架集中的框架。好吧。
Here is the latest fiddle解决了现在制定的问题。但是让我们看看 future 会发生什么变化......