html - 如何将子元素的宽度设置为全宽而不是 'visible' 宽度(被 overflow-x : auto) 截断

Question

请看一下这个 fiddle :http://jsfiddle.net/eKJAj/37/ . HTML 很简单:一个“容器”可滚动元素，它有一个“父”子元素，而“父”子元素又具有“栏”和“内容”子元素。 'content' 元素的宽度是动态的，但在本例中已设置为等于 'container' 的宽度 + 100px。我在这里从 CSS 中复制了最相关的部分:

.container {
    max-width: 300px;
    overflow-x: auto;
}

.parent {
    position: relative;
    width: auto;
}

.bar {
    position: absolute; 
    top: 10px;
    width: 100%;
}

.content {
    width: 400px;
}

正如您在 Fiddle 中看到的那样，当您向右滚动时，红色条的宽度受“父”元素的宽度限制，其宽度又似乎被设置为“可见”宽度，即未被“容器”元素剪裁的宽度。只要看看黄色背景，您就会发现情况就是如此。

我想要完成的是红色条一直向右延伸，这似乎只有在父元素也一直向右延伸(完全包围'content'子元素)时才有可能，而不是其宽度受滚动“视口(viewport)”限制。

有人有一些想法可以使用 CSS 来实现吗？我不想使用 jQuery 或类似的东西。我认为这应该只适用于 CSS。不幸的是，不可能为“父”元素设置固定宽度(这将是一个非常简单的解决方案......)，因为“内容”元素的宽度是动态的(甚至可能小于“容器”元素)。 'bar' 元素也不能移动到 'content' 元素中，它需要是 'parent' 元素的直接子元素。

Answer 1

如果您希望 div 占据内容的整个 widht，您需要更改 block 行为。试试这个:

.parent {
    display:inline-block;
}

检查 UpdatedFiddle