如何將子元素的寬度設置為全寬度，而不是“可見”寬度（由overflow-x裁剪：自動）

Question

請看一下這個小提琴： http : //jsfiddle.net/eKJAj/37/ 。 HTML很簡單：一個“容器”可滾動元素，具有一個“父”子元素，而該子元素又具有“ bar”子元素和“ content”子元素。 “內容”元素的寬度是動態的，但在此示例中已設置為等於“容器的寬度+ 100px”。 我在這里從CSS復制了最相關的位：

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

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

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

.content {
    width: 400px;
}

如您在小提琴中所見，當您向右滾動時，紅色條的寬度受到“父”元素的寬度的限制，“父”元素的寬度又被設置為“可見”寬度，即未被“容器”元素裁剪的寬度。 只要看一下黃色背景，就會看到這種情況。

我要完成的是紅色條一直向右延伸，這只有在父元素也一直向右延伸（完全封閉“ content”子元素）的情況下才可能實現，寬度受滾動條“視口”限制。

任何人都有一些使用CSS完成此操作的想法嗎？ 我寧願不要使用jQuery之類的東西。 我認為這應該僅適用於CSS。 不幸的是，由於'content'元素的寬度是動態的（甚至可能小於'content'元素的寬度，因此無法為'parent'元素設置固定的寬度（這是一個非常簡單的解決方案...）。 “容器”元素）。 “ bar”元素不能移入“ content”元素，它必須是“ parent”元素的直接子代。

Answer 1

如果您希望div占用內容的整個widht ，則需要更改block行為。 嘗試這個：

.parent {
    display:inline-block;
}

檢查更新小提琴