我有這樣的html和css代碼。我有兩個問題：
- 當視窗寬度為 600px 時，理論上左框應該是 150px 寬度，因為它是父級（600px）的 25%，但寬度是 120px。
- 右框不能達到100vw。它只需要
widthOfParent-widthOfLeft。我想它應該以某種方式溢位并達到100vw。
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
* {
margin: 0;
padding: 0;
}
.container {
height: 300px;
/* your code here */
display: flex;
justify-content: start;
}
.left {
background-color: #f44336;
height: 100%;
width: 25%;
min-width: 100px;
}
.right {
background-color: #2973af;
height: 100%;
width: 100vw;
}
密碼箱： https ://codesandbox.io/s/admiring-darkness-cu99x ?file=/src/styles.css:0-293
uj5u.com熱心網友回復：
你正面臨收縮效應。在所有情況下，總寬度100vw 25%都大于100%因此兩個專案將同等縮小。
由于您的容器也是全寬的，因此溢位將始終等于25%or 25vw。兩個元素都有默認的收縮值1，所以我們的總和等于125vw。
第一個元素的寬度將等于：25vw - (25vw * 25vw/125vw) = 20vw
第二個元素的寬度將是：100vw - (25vw * 100vw/125vw) = 80vw
你可以從邏輯上看到總數是100vw( 20vw 80vw)，當螢屏寬度等于時600px，20vw等于120px。
為避免這種情況，請通過設定禁用第一項的收縮效果 flex-shrink:0
* {
margin: 0;
padding: 0;
}
.container {
height: 300px; /* your code here */
display: flex;
}
.left {
background-color: #f44336;
width: 25%;
min-width: 100px;
flex-shrink:0;
}
.right {
background-color: #2973af;
width: 100vw;
}<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>相關：為什么彈性專案僅限于父尺寸？
uj5u.com熱心網友回復：
- 對彈性專案使用“flex”屬性而不是寬度
.container { height: 300px; width: 600px; /* added fixed width for testing */ display: flex; justify-content: start; } .left { background-color: #f44336; min-width: 100px; flex: 1; /* 1/4 ratio within the parent element, as the other flex item in the parent is "flex: 3;" */ } .right { background-color: #2973af; flex: 3; /* 3/4 ratio within the parent element, as the other flex item in the parent is "flex: 1;" */ }
- 右側元素不能占據 100% 的寬度，因為它與 flex 父級中的左側 div 一起，我們將寬度引數分配為“flex: value”
CSS flex 屬性 https://www.w3schools.com/cssref/css3_pr_flex.asp
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/416141.html
標籤：