div inline-block not resizing

Question

我有两个元素，两个都带有display：inline-block，父类有white-space：nowrap。

当屏幕被调整大小时，右侧的div不会调整大小，如this。

我想只使蓝色div的大小。

Full source（的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

有几个方法可以做到这一点。 方法1： two divs the same line, one dynamic width, one fixed

方法2（切缘阴性） http://alistapart.com/article/negativemargins

Answer 2

不幸的是，Narxx的回答需要对浮动的div。我确信如果你正在建立一个真实的网站，你应该这样做，但在我的情况下，我试图不使用它。

我发现的是上的.container和position: absolute上.article做我想要的。

Simplified fiddle

如果任何人都可以解释为什么，我会标记为一个答案。