Prévenir le rétrécissement flexbox

Je suis en utilisant flexbox à disposition une page car la croissance comportement est utile. Mais je voudrais l'éviter complètement l' rétrécissement comportement.

De toute façon de gérer cela?

Exemple de code:

<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;
}

OriginalL'auteur Simon Boudrias | 2015-03-19

  1. 44

    Essayer de régler le flex-shrink propriété 0 sur le .flex-box.

    Pour une raison quelconque paramètre flex-shrink: 0; ne fonctionne pas, mais la configuration manuelle: flex-shrink: 1 0 auto; a bien fonctionné...
    flex-shrink: 1 0 auto; ne semble pas être une propriété valide.
    ils pensaient probablement flex: 1 0 auto;
    developer.mozilla.org/en-US/docs/Web/CSS/flex

    OriginalL'auteur zgood

  2. 15

    Ajouter un min-width avec tout ce que vous voulez la plus petite valeur possible de la boîte. Flexbox de ne pas réduire la largeur en dessous du min-width.

    min-width fonctionne très bien, mais en responsive design, il ne s'ajuste pas avec l'espace si son moins que la valeur spécifiée. flex-la réduction n'est pas de travail pour moi.
    Aussi, safari utilise encore des min-width propriété pour flexbox comportement, résultant en une étrange croix problèmes de navigateur entre IE - Safari et le "reste". Lire les notes sur puis-je utiliser: caniuse.com/#search=flexbox

    OriginalL'auteur firefoxuser_1