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

【问题标题】：css max-width not working inside another divcss max-width 在另一个 div 中不起作用
【发布时间】：2016-11-03 04:41:44
【问题描述】：

参见下面的 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>

【问题讨论】：

你想完成什么？一切看起来都正常工作。带有display:block 的元素（默认情况下，div 有这个）将始终扩展以覆盖它们可以覆盖的最大宽度。
a 使父元素的最小宽度为 600px。由于 parent 已经是 600px，b 将占用所有空间。
你想在 div.b 的 100px 上放置一个左右边距吗？这似乎可以解决问题。
当您将浏览器窗口设置为小于 600 像素时，第二个 div 应该会变小，直到您达到 400 像素，但这不会发生
看@karaokyo的回答

标签： css

【解决方案1】：

外部 div 错误。因为amax-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

【讨论】：

我刚刚尝试了你上面的css，但它仍然没有调整。 .b 应该调整为 300 像素，但它不会停留在 600 像素
它对我有用！！我更新了我的答案，现在有一个演示。请检查一下
感谢演示！但它仍然无法正常工作；当您将浏览器调整为 600 像素时，绿色 div 会一直覆盖黄色 div。如果它会像我想要的那样调整，即使在 600px 你应该仍然看到黄色突出，因为绿色 div 应该变得更小
您使用的是哪种浏览器？
我不明白为什么它不适合你。对我来说没有问题：/