Comment créer une boîte flexible centrée de largeur dynamique

Question

Ce balisage doit produire une boîte de 30px de largeur centrée sur 600px. Mais à la place, il rétrécit la boîte de sorte qu'il n'y a pas de largeur (ou s'il y a du contenu, il rétrécit à la largeur de contenu minimale). Vous vous demandez comment faire pour que la boîte centrée soit de 600px, mais elle réagit à des tailles de fenêtre plus petites.

* { 
 
    position: relative; 
 
    box-sizing: border-box; 
 
} 
 

 
html, body { 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 

 
div { 
 
    display: flex; 
 
} 
 

 
body > div { 
 
    align-items: center; 
 
    -webkit-box-pack: center; 
 
    -webkit-justify-content: center; 
 
    justify-content: center; 
 
    border: 1px solid orange; 
 
} 
 

 
body > div > div { 
 
    max-width: 600px; 
 
    border: 1px solid black; 
 
} 
 

 
body > div > div > div { 
 
    border: 1px solid blue; 
 
    background: red; 
 
    height: 30px; 
 
}

<div> 
 
    <div> 
 
    <div></div> 
 
    </div> 
 
</div>

Answer 1

S'il vous plaît essayer. Donner width:100% à body > div > div et body > div > div > div classe.

* { 
 
    position: relative; 
 
    box-sizing: border-box; 
 
} 
 

 
html, body { 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 

 
div { 
 
    display: flex; 
 
} 
 

 
body > div { 
 
    align-items: center; 
 
    -webkit-box-pack: center; 
 
    -webkit-justify-content: center; 
 
    justify-content: center; 
 
    border: 1px solid orange; 
 
} 
 

 
body > div > div { 
 
    max-width: 600px; 
 
    border: 1px solid black; 
 
    width:100%; 
 
} 
 

 
body > div > div > div { 
 
    border: 1px solid blue; 
 
    background: red; 
 
    height: 30px; 
 
    width:100%; 
 
}

<div> 
 
    <div> 
 
    <div></div> 
 
    </div> 
 
</div>

Answer 2

S'il vous plaît permettez-moi de simplifier le code à ses composants de base. Vous avez un div.container qui est défini comme display:flex. A l'intérieur, vous avez un div que vous souhaitez ajuster en fonction des paramètres flexibles. Le div interne est réglée à croître et à se contracter en fonction de son conteneur:

flex: 1 1 auto; /* shorthand for flex-grow, flex-shrink, flex-basis */ 

Il est également réglée pour avoir une max-width:600px et centré dans la page avec margin-left et margin-right ensemble à auto. Je crois que cette construction répond à vos exigences.

div.container { 
 
    display: flex; 
 
    border: 1px solid orange; 
 
} 
 

 
div.container div { 
 
    flex: 1 1 auto; 
 
    border: 1px solid blue; 
 
    background: red; 
 
    height: 30px; 
 
    margin: 0 auto 0 auto; 
 
    max-width: 600px; 
 
}

<div class="container"> 
 
    <div></div> 
 
</div>

Answer 3

C'est le comportement par défaut d'un élément flexible, étant aussi large que son contenu, similaire à un bloc en ligne.

La raison est sa valeur par défaut flex-grow, qui est 0 et lui dit de ne pas remplir l'espace restant.

Ajoutez flex-grow: 1 à chaque niveau d'élément flexible qui devrait remplir son parent.

* { 
 
    position: relative; 
 
    box-sizing: border-box; 
 
} 
 

 
html, body { 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 

 
div { 
 
    display: flex; 
 
} 
 

 
body > div { 
 
    align-items: center; 
 
    -webkit-box-pack: center; 
 
    -webkit-justify-content: center; 
 
    justify-content: center; 
 
    border: 1px solid orange; 
 
} 
 

 
body > div > div { 
 
    max-width: 600px; 
 
    border: 1px solid black; 
 
    flex-grow: 1;     /* added */ 
 
} 
 

 
body > div > div > div { 
 
    border: 1px solid blue; 
 
    background: red; 
 
    height: 30px; 
 
    flex-grow: 1;     /* added */ 
 
}

<div> 
 
    <div> 
 
    <div></div> 
 
    </div> 
 
</div>