Div mit erzwungener maximaler Breite, wenn möglich

Question

Ich möchte eine div erstellen, die eine max-width hat. Aber ich will auch, dass wenn immer möglich max-width erreicht wird.

Man könnte sagen, dass dies mit min-width erreichbar ist. Das Problem ist, dass ich auch die div automatisch verkleinern möchte, wenn sie benötigt wird.

Wie kann ich das tun?

Answer 1

Sie können dies tun, mit Flexbox, alles, was Sie setzen müssen, ist flex-basis oder flex: 0 1 300px, so jetzt wird Element maximal 300px wachsen, aber es wird auch schrumpfen, wenn nötig, wie Sie hier sehen können, wenn Sie Fenster Fiddle

die Größe

.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

Sie können den Wert display des DIVs auf inline-block oder table setzen. Oder float es.

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

---

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

---

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

derer Jeder kann die Schrumpf auslösen Funktion passen.