Verhindern Sie das Schrumpfen der Flexbox

74

Ich verwende Flexbox, um eine Seite zu gestalten, da das wachsende Verhalten nützlich ist. Aber ich möchte das Schrumpfverhalten vollständig verhindern .

Wie auch immer, um das zu schaffen?

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;
}
css flexbox Simon Boudrias
quelle

Antworten:

129

Versuchen Sie, die flex-shrinkEigenschaft auf 0zu setzen .flex-box.

zgood
quelle
Aus irgendeinem Grund flex-shrink: 0;funktionierte die Einstellung nicht, aber die manuelle Einstellung: flex-shrink: 1 0 auto;funktionierte gut ...
Simon Boudrias
2
Flex-Shrink: 1 0 Auto; scheint keine gültige Eigenschaft zu sein.
Ashish Ranjan
8
sie meinten wahrscheinlichflex: 1 0 auto;
Ryan Taylor
2
Es scheint, dass die Einstellung 0 für die Flex-Shrink-Eigenschaft in diesem speziellen Fall nicht ausreicht. Wenn flex-direction:columnSie mit arbeiten , müssen Sie auch einen min-widthWert festlegen , um dieses Ziel zu erreichen.
Klewis
Ich habe ungefähr eine Stunde damit verbracht herauszufinden, warum meine Karten früher schrumpften ... Möge Gott Sie für Ihre gute Arbeit segnen !!
Shardul Birje
32

Fügen Sie a min-widthmit dem gewünschten Wert der Box hinzu. Flexbox verkleinert die Breite nicht unter die Mindestbreite.

Firefoxuser_1
quelle
1
Die Mindestbreite funktioniert einwandfrei, passt sich jedoch im reaktionsschnellen Design nicht an den Abstand an, wenn er kleiner als der angegebene Wert ist. Flex-Shrink funktioniert bei mir allerdings überhaupt nicht.
Ashish Ranjan
Außerdem verwendet Safari weiterhin die Eigenschaft min-width für das Flexbox-Verhalten, was zu seltsamen browserübergreifenden Problemen zwischen IE - Safari und "dem Rest" führt. Überprüfen Sie die Hinweise auf kann ich verwenden: caniuse.com/#search=flexbox
Silom
4

Sie können versuchen, sich bei dem Kind zu bewerben:

.flex-box{
    width: max-content;
}

Endergebnis: 

.flex-vertical-container{
  display: flex;
  flex-direction: column;
}
.flex-vertical-container div{
  background: gray;
}
.flex-box{
  width: max-content;
}
<div class="flex-vertical-container">
    <div class="flex-box">
         This one should grow but not shrink
    </div>
    <div>This is shrinking</div>
    <div>This is shrinking</div>
</div>
Erweitern Sie das Snippet
Erik Martín Jordán
quelle
1
Wenn Sie nicht auf einen bestimmten Browser abzielen, ist max-contentdies keine gute universelle Wahl.
Klewis
Wird von IE und Edge nicht unterstützt. Unterstützt von Chrome, Safari und Firefox. caniuse.com/#search=max-content
Erik Martín Jordán
0

Wenn Sie es wie ich flex-directionsind row, versuchen Sie, die Breite des Kindes auf 100% einzustellen. Das hat das Schrumpfen für mich behoben.

Serere Jegede
quelle