Div with "max-width" 在调整 windows 大小时不减小其大小

Question

我有一个 div，"max-width" 设置为 400px，但是当我减小 windows 的尺寸时，它并没有变小以适应新尺寸。

你可以在这里看到一个例子：https://jsfiddle.net/d0d4jx6L/

这是HTML：

<div class="menu">
    fixed menu 
</div>

<div class="content">
    content (displayed on the right of the menu)
</div>

这里是 css:

.menu {
    width:250px;
    position:fixed;
}

.content {
    position:relative;
    left:250px; 
    max-width:400px; /* not working */
}

谢谢！

Answer 1

因为你应该设置为position:absolute .content。当你在css中使用left时，元素应该是absolute或fixe。

.content {
    position:absolute;
    left:250px; 
    max-width:400px; /* not working */
}

这里有效 https://jsfiddle.net/d0d4jx6L/2/

Answer 2

使用 margin-left 代替 left。

.content {
    background:blue;
    position:relative;
    margin-left:250px; /*use instead of left*/
    max-width:400px;
}