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

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