Width of child element is able to override max-width set by parent element. How can I prevent this f-CodePudding

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 >
  <div >
    <nav >
      <p>Left Nav</p>
    </nav>
  </div>
  <div >
    <div >
      <p>Body Content</p>
    </div>
  </div>
  <div >
    <div >
      <p>Right Panel</p>
    </div>
  </div>
</div>

CodePudding user response：

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 >
  <div >
    <nav >
      <p>Left Nav</p>
    </nav>
  </div>
  <div >
    <div >
      <p>Body Content</p>
    </div>
  </div>
  <div >
    <div >
      <p>Right Panel</p>
    </div>
  </div>
</div>

CodePudding user response：

<!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 >
  <div >
    <nav >
      <p>Left Nav</p>
    </nav>
  </div>
  <div >
    <div >
      <p>Body Content</p>
    </div>
  </div>
  <div >
    <div >
      <p>Right Panel</p>
    </div>
  </div>
</div>


</body>
</html>

; /I don't want this to over-ride max-width of 320px, but it does./ }