子元素的宽度可以覆盖父元素设置的最大宽度。 我怎样才能防止这种情况发生？
[英]Width of child element is able to override max-width set by parent element. How can I prevent this from happening?
问题描述
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.
我正在尝试根据视口大小创建 3 列布局模板，每列具有固定比例，因此左侧为 20%，中心正文内容为 50%，右侧为 30%。 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.但是我面临的问题是当我将width:400px添加到 child-left 时，它会忽略 parent-left(320px) 的最大宽度并将左侧导航的宽度拉伸到 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>
2 个解决方案
解决方案1
0 2022-01-19 07:24:02
Thanks to @Chase for idea感谢@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>
解决方案2
0 2022-01-19 07:25:11
<!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. /我不希望它覆盖 320px 的最大宽度，但它确实如此。 / } / }
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.