子元素的宽度可以覆盖父元素设置的最大宽度。我怎样才能防止这种情况发生？

Question

我正在尝试根据视口大小创建 3 列布局模板，每列具有固定比例，因此左侧为 20%，中心正文内容为 50%，右侧为 30%。我还在父容器下以像素为单位设置了每列的最小和最大宽度。但是我面临的问题是，当我将width:400px 添加到左侧子节点时，它会忽略父级左侧的最大宽度（320 像素）并将左侧导航的宽度延伸到 400 像素。我希望子元素尊重父元素设置的最大宽度。如何设置每列的最大/最小宽度，以便无论我在子元素中放置什么宽度，它都尊重父元素的宽度百分比和最大/最小宽度？

* {
  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>

Answer 1

感谢@Chase 的想法

* {
  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>

Answer 2

<!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>

; /我不希望它覆盖 320 像素的最大宽度，但它确实如此。/ }