Html 如何将子元素的宽度设置为全宽而不是'；可见'；宽度（由溢出剪裁-x:自动）

请看一下这把小提琴：。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中看到的，当您向右滚动时，红色条的宽度受到“父”元素宽度的限制，而“父”元素的宽度似乎被设置为“可见”宽度，即“容器”元素未剪裁的宽度。只要看看黄色的背景，你就会发现情况就是这样

我想实现的是，红色条一直向右延伸，这似乎只有在父元素也一直向右延伸（完全包围“内容”子元素）时才可能实现，而不是让其宽度受到滚动“视口”的限制

---

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

如果希望

div

获取整个

widt

内容，则需要更改

块的行为。试试这个：

.parent {
    display:inline-block;
}

查看
谢谢！我想，普通的“积木”也会根据孩子的内容进行缩放。