css max-width 在另一个 div 中不起作用

Question

请参阅下面的 css/html；有人可以帮助为什么内部 div(类“b”)中的最大宽度不起作用吗？我在 chrome 中运行它，它保持 600px 的最大宽度并且不会调整到 400px。调整浏览器窗口时，外部 div 工作并从 800 调整到 600，但内部 div 保持在 600px!有小费吗？我尝试添加 !important 和其他内容，但没有任何帮助。

谢谢!

.a{
margin: 0 auto;
background:yellow;
max-width:800px;
min-width:600px;
height:100px;

}
.b{
margin: 0 auto;
background:green;
max-width:600px;
min-width:400px;
height:50px;
}

<div class="a">
<div class="b">
</div>
</div>

Answer 1

外面的div是错误的。因为 a max-width:600px; 浏览器停止了 max-width 你必须从 .b

.a{
    margin: 0 auto;
    background:yellow;
    max-width:800px;
    min-width:400px;
    height:100px;

}
.b{
    margin: 0px 50px 0px 50px;
    background:green;
    min-width:400px;
    height:50px;
}

工作 DEMO