<div class='container'>
<div class='col-1'></div>
<div class='col-2'></div>
</div>
.container{
width: 100vw;
height: 100vh;
display: flex;
}
.col-1{
width: 40%;
height: 100%;
background-color: blue;
}
.col-2{
width: 60%;
height: 100%;
background-color: red;
}
我怎樣才能達到 col-1 將其寬度調整到某一點的結果？（假設它的寬度將在 20 rem 時停止收縮，并且 col-2 的寬度將自動調整以填充可用容器空間的剩余寬度？
uj5u.com熱心網友回復：
開始放棄flex支持grid，它也更容易和更強大：
body { margin: 0; }
.container {
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: minmax(15rem, 1fr) 1fr;
}
.col-1 {
background-color: blue;
}
.col-2 {
background-color: red;
}<div class='container'>
<div class='col-1'></div>
<div class='col-2'></div>
</div>uj5u.com熱心網友回復：
您可以使用 display: grid; 而不是彈性。然后設定 grid-template-columns: 20rem 1fr; 然后將 col-1 和 col-2 寬度設定為 100%。如果您更改 grid-template-columns，則 col-1 和 col-2 都會隨之調整！
uj5u.com熱心網友回復：
我認為這應該有效！
.container{
width: 100vw;
height: 100vh;
display: flex;
}
.col-1{
width: 20%;
height: 100%;
background-color: blue;
}
.col-2{
width: calc(100% - 100px);
height: 100%;
background-color: red;
} <div class='container'>
<div class='col-1'></div>
<div class='col-2'></div>
</div>通過將 width: 60% 從 .col-2 替換為 width: calc(100% - 100px); 使用計算！
uj5u.com熱心網友回復：
如果您正在使用display: flex，則應使用flex定義縮放的方法（而不是width）。
.container {
width: 100vw;
height: 100vh;
display: flex;
flex-flow: row nowrap;
}
.col-1 {
flex: 0 1 20rem;
background-color: blue;
}
.col-2 {
flex: 1 0 0;
background-color: red;
}
<div class='container'>
<div class='col-1'></div>
<div class='col-2'></div>
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/381208.html