できるだけ強制最大幅のDiv

Question

max-widthのdivを作成したいとします。でも、可能な限りいつでもmax-widthが達成されることを願っています。

これはmin-widthを使用して達成可能であると言えるでしょう。問題は、必要に応じてdivが自動的に縮小されるようにすることです。

どうすればいいですか？

Answer 1

あなたは、Flexboxでこれを行うことができますあなたが設定する必要があるすべてはflex-basisまたはflex: 0 1 300pxなので、今の要素が300pxの最大に成長しますが、必要な場合は、ウィンドウFiddle

のサイズを変更するとき、あなたがここに見ることができるように、それはまた、縮小します

.content { 
 
    display: flex; 
 
} 
 

 
.box { 
 
    padding: 10px; 
 
    margin: 1px; 
 
    border: 1px solid black; 
 
} 
 

 
.box:last-child { 
 
    flex-basis: 300px; 
 
}

<div class="content"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
</div>

Answer 2

divのdisplayの値をinline-blockまたはtableに設定できます。またはfloatです。

div { 
    display: inline-block; 
    max-width: 500px; 
} 

---

div { 
    display: table; 
    max-width: 500px; 
} 

---

div { 
    float: left; 
    max-width: 500px; 
} 

これらはいずれも、機能に合わせて縮小をトリガすることができます。