帶有內聯塊的 div 未調整大小

Question

我有兩個元素，都帶有 display: inline-block，父元素有空格：nowrap。

調整屏幕大小時，右側的 div 不會調整大小，如下所示。

我試圖只調整藍色 div 的大小。

完整源代碼（jsfiddle）

html的結構是這樣的：

<div class="container">
    <div class="header">...</div> <!-- red -->
    <div class="aside">...</div>  <!-- pink -->
    <article>...</article>        <!-- blue -->
</div>

相關css：

* {
    box-sizing: border-box;
}

div.container {
    margin: 0 auto;
    max-width: 40em;
    padding: 0;
    white-space: nowrap;
}

div.container > * {
    white-space: normal;
}

.aside {
    display: inline-block;
    max-width: 15em;
    vertical-align: top;
}

.article {
    display: inline-block;
    max-width: 25em;
}

Answer 1

老問題，但為了任何閱讀本文並有疑問的人的知識：

我發現設置 position: relative 上的 .container 和 position: absolute 上的 .article 做我想要的。

絕對定位元素相對於最近的定位祖先定位，其中定位元素意味着任何具有不同於靜態（默認）的 position 屬性的東西； 如果沒有找到任何定位元素，則使用 body 元素。

絕對定位元素，如果它們的寬度和高度在 auto 中，則調整大小以適應其內容，並通過其定位的祖先限制最大尺寸。 您可以檢查這個放置一個短字符串而不是一個大字符串：元素將縮小到文本的長度。 如果您從 div.container 中刪除定位，文章（如果仍然定位為絕對）將增長（取決於其內容）以覆蓋前一個元素和主體寬度之間的空間。

並且，與上述相關並為這個延遲的答案添加一些實用程序，一個鮮為人知的獎勵：如果您定義絕對定位元素的右和左屬性，並將寬度保留為自動，則該元素將覆蓋左右之間的水平尺寸定義。 這樣你就可以把類似的東西

article {
    background-color: #a0f4ec;
    display: inline-block;
    position: absolute;
    right: 0;
    left: 30%;
}

div.aside {
    background-color: #faf;
    display: inline-block;
    max-width: 15em;
    width: 30%;
}

這個技巧也適用於垂直方向，但具有高度、頂部和底部屬性。

Answer 2

有幾種方法可以做到。 方法一： 兩個div在同一行，一個動態寬度，一個固定

方法二（負邊距） http://alistapart.com/article/negativemargins

Answer 3

不幸的是，Narxx 的答案要求浮動 div。 如果您正在構建一個真正的網站，我確信這就是您應該做的，但就我而言，我盡量不使用它。

我發現設置position: relative上的.container和position: absolute上的.article做我想要的。

簡化的小提琴

如果有人可以解釋原因，我會將其標記為答案。