I'm trying to create 3 columns layout template with fixed ratio per each column based on size of view port so 20% for left, 50% for center body content and 30% for right. I also have set minimum and maximum width per each column in pixels under parent containers. But problem I'm facing is when I add width:400px to child-left, it ignores the max-width of parent-left(320px) and stretch out the width of left nav to 400px. I was hoping child element to respect the max-width set by parent. How can I set the max/min-width of each column so that no matter what width I put in child element, it respects the width percent and max/min-width of parent element?
* {
outline: 1px red solid;
margin: 0;
}
.parent-wrapper {
display: flex;
}
.parent-left {
width: 20%;
max-width: 320px;
min-width: 256px;
}
.parent-center {
width: 50%;
max-width: 1400px;
}
.parent-right {
width: 30%;
max-width: 464px;
min-width: 384px;
}
.child-left {
background-color: hotpink;
width: 400px; /*I don't want this to over-ride max-width of 320px, but it does.*/
}<div class="parent-wrapper">
<div class="parent-left">
<nav class="child-left">
<p>Left Nav</p>
</nav>
</div>
<div class="parent-center">
<div class="child-center">
<p>Body Content</p>
</div>
</div>
<div class="parent-right">
<div class="child-right">
<p>Right Panel</p>
</div>
</div>
</div>Thanks to @Chase for idea
* {
outline: 1px red solid;
margin: 0;
}
.parent-wrapper {
display: flex;
}
.parent-left {
width: 20%;
max-width: 320px;
min-width: 256px;
}
.parent-center {
width: 50%;
max-width: 1400px;
}
.parent-right {
width: 30%;
max-width: 464px;
min-width: 384px;
}
.child-left {
background-color: hotpink;
max-width: 100%;/*if u use less than 100% it works but more means set back to 100% that's available space by parent*/
width: 400px; /*I don't want this to over-ride max-width of 320px, but it does.*/
}<div class="parent-wrapper">
<div class="parent-left">
<nav class="child-left">
<p>Left Nav</p>
</nav>
</div>
<div class="parent-center">
<div class="child-center">
<p>Body Content</p>
</div>
</div>
<div class="parent-right">
<div class="child-right">
<p>Right Panel</p>
</div>
</div>
</div><!DOCTYPE html>
<html>
<style>
* {
outline: 1px red solid;
margin: 0;
}
.parent-wrapper {
display: flex;
}
.parent-left {
flex:1;
max-width:320px;
}
.parent-center {
flex:3;
}
.parent-right {
flex:2;
}
.child-left {
background-color: hotpink;
width:100%
/*I don't want this to over-ride max-width of 320px, but it does.*/
}
</style>
<body>
<div class="parent-wrapper">
<div class="parent-left">
<nav class="child-left">
<p>Left Nav</p>
</nav>
</div>
<div class="parent-center">
<div class="child-center">
<p>Body Content</p>
</div>
</div>
<div class="parent-right">
<div class="child-right">
<p>Right Panel</p>
</div>
</div>
</div>
</body>
</html>
; /I don't want this to over-ride max-width of 320px, but it does./ }