Jason Jason - 1 month ago 12
CSS Question

css max-width not working inside another div

See css/html below; Can someone help why the max-width in the inside div (class "b") will not work? I'm running this in chrome and it stays with the max-width of 600px and does not adjust to 400px. The outside div works and adjusts itself from 800 to 600 when adjusting the browser window but the inside div stays on 600px! any tips? I tried adding !important and other things but nothing helped.

Thanks!



.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

The outside div is wrong. Because a max-width:600px; the browser stoped that max-width you must give equal or lower value from .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;
}

working DEMO

Comments