具有動態寬度的列

Question

我需要兩個分欄的左手柄，左列需要300px的最小寬度，右列應使用剩餘寬度，類似於css-calc。這是可能的還是我應該寫自定義的CSS。

calc(100% - 300px) 

HTML

<div class="col-2"></div> 
<div class="col-10"></div> 

Answer 1

這也與Flexbox的實現，如下所示：

.parent { 
 
    display: flex; 
 
} 
 

 
.child { 
 
    height: 30px; 
 
} 
 

 
.col-2 { 
 
    flex: 2; 
 
    min-width: 300px; 
 
} 
 

 
.col-10 { 
 
    flex: 10; 
 
} 
 

 
.bg-blue { 
 
    background: blue; 
 
} 
 

 
.bg-green { 
 
    background: green; 
 
}

<div class="parent"> 
 
    <div class="child col-2 bg-blue"></div> 
 
    <div class="child col-10 bg-green"></div> 
 
</div>

片段在this codepen也可用。

瞭解Flexbox的更多信息from here。

閱讀flexbox的CanIUse page。