Flexbox schrumpfen

Question

Ich verwende Flexbox zum Layout einer Seite, weil das wachsende Verhalten ist nützlich. Aber ich möchte das schrumpfende Verhalten vollständig verhindern.

Wie auch immer, um dies zu verwalten?

Beispielcode:

<div class="flex-vertical-container"> 
    <div class="flex-box"> 
     This one should grow but not shrink 
    </div> 
    <div></div> 
    <div></div> 
</div> 

CSS

.flex-vertical-container { 
    display: flex; 
    flex-direction: column; 
} 

.flex-box { 
    flex: 1; 
} 

Answer 1

Versuchen Sie, die flex-shrink Eigenschaft 0 auf der .flex-box Einstellung.

Answer 2

Fügen Sie eine min-width mit dem, was Sie wollen, den kleinstmöglichen Wert der Box zu sein. Flexbox wird die Breite unterhalb der Mindestbreite nicht verkleinern.