Gerard Reches Gerard Reches - 5 months ago 13
CSS Question

width in pixels ignoring max-width:100%

I have a problem between

width
and
max-width
working in an element with a grandparent flex positioned container.

When I use
width
in pixels with
max-width: 100%
in this element, if the width is bigger than its parent it just ignores the
max-width:100%
. But if for example I use
width: 150%
then the
max-width:100%
does its work.



body{
width: 640px;
height: 360px;
position: relative;
}
body:before{
content:"";
width:100%;
height:100%;
box-sizing: border-box;
position: absolute;
border: 2px solid black;
}
body:after{
content:"16:9 screen size ratio example";
position: absolute;
bottom: 0;
right: 10px;
}
#flex-container{
width: 100%;
height: 100%;
display: flex;
flex-flow: row nowrap;
background-color: #95a5a6;
}
#sidebar{
min-width:150px;
flex: 0 1 150px;
background-color: #7f8c8d;
}
#main-content{
width:100%;
flex: 1 1 auto;
background-color: white;
}
.page{
width: 100%;
padding: 16px;
box-sizing: border-box;
}
.grid{
width: 800px;
max-width: 100%;
height: 200px;
background-color: red;
color: white;
padding: 16px;
box-sizing: border-box;
}

<div id="flex-container">
<div id="sidebar"><h2>Sidebar</h2></div>
<div id="main-content">
<div class="page">
<h1>Content page</h1>
<div class="grid">
A grid with certain width defined in units and based on the device. Specified width should not exceed its parent width (max-width: 100%).
</div>
</div>
</div>
</div>


<br><br><br>


Should work like this:
<br>
<div style="width:640px;height:360px; border: 2px solid black;background-color:white;">
<div style="width:100%;height:100%;">
640px width parent
<div style="max-width:100%; width:800px; height:100px; background-color:green;color:white;">
800px width with max-width:100%
</div>
</div>
</div>





Here is the JSFiddle.

Answer

Your container (body) is width: 640px.

The child of body (the #flex-container) is width: 100%. In other words, 640px.

Your left-side flex item (#sidebar) is min-width: 150px. For argument's sake: width: 150px.

Your right-side flex item (#main-content) is width: 100%. Computing to: 531.989px (reason tbd).

The child of #main-content (.page) is width: 100%. Also, 531.989px

The child of .page (.grid) is width: 500px. This fits well into the parent, with extra space (31.989px) left over.

Your max-width: 100% never sees any action. It works, it just isn't called upon.

In your second example, you apply width: 800px to the .grid equivalent, which is greater than 531.989px, so max-width: 100% is called into action.


Flex items minimum size

Note that by default a flex item will not shrink past the size of its content.

Add min-width: 0 to #main-content.

Explanation: Why doesn't flex item shrink past content size?


Syntax Errors

Also note that your line commenting syntax...

.grid {
  width: 500px; // For some reason this ignores max-width when is defined in units.
  max-width: 100%;
  height: 200px;
  background-color: red;
  color: white;
  padding: 16px;
  box-sizing: border-box;
}

.... and parenthesis around the flex property...

#sidebar{
  min-width:150px;
  flex(0, 1, 150px);
  background-color: #7f8c8d;
}
#main-content{
  width:100%;
  flex(1, 1, auto);
  background-color: white;
}

are causing significant problems.

Revised Fiddle

Comments