具有动态宽度的列

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。