動的な幅を持つ列

2列のグリップが必要です。左側の列に300pxの最小幅が必要です。右側の列は、css-calcと同様に残りの幅を使用します。これは可能ですか、カスタムCSSを書く必要がありますか？動的な幅を持つ列

calc(100% - 300px)

HTML

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

出典

2016-12-28 vuvu

代わりにディスプレイ 'table'と' table-cell'を使わないのはなぜですか？ –

あなたはブートストラップなしの意味ですか？ – vuvu

はい。つまり、この特殊なケースでは、応答性の高いグリッドシステムは必要ありません。 –

これは以下のように、また、フレキシボックスで達成可能である：this codepenでも利用できる

.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>

スニペット。

フレックスボックスについて詳しくはfrom hereをご覧ください。

フレックスボックスのCanIUse pageもお読みください。

出典

2016-12-28 12:02:58 Siavas

downvoteは私を答えに戻して、何かが私のスニペットで間違っていたことを実感したので、私はそれを修正しました。 _subtle_発言ありがとうございました。 – Siavas

動的な幅を持つ列

答えて

関連する問題