web-dev-qa-db-fra.com

Largeur ignorée sur flexbox items

http://jsfiddle.net/XW9Se/

J'ai mis width: 200px; à gauche <div> mais si je le vois avec l'outil d'inspection du navigateur, il semble que la largeur réelle soit aléatoire ou quelque chose. Il change constamment en fonction de la taille de la fenêtre.

Pourquoi la largeur ne prend-elle pas effet?

[~ # ~] modifier [~ # ~] : si je supprime width: 100% la largeur reste fixe. Mais j'en ai besoin pour que le #main div prend la largeur restante :( Existe-t-il un moyen d'avoir la barre latérale @ largeur fixe et l'autre <div> remplir le reste de la largeur du conteneur? width: auto; sur #main ne fonctionne pas ..

csscss3widthflexbox
50
Alex

Retirez la largeur sur .container > div et utilise flex: auto; le #main: violon

#main {
   flex: auto; 
   background: lightblue; 
  -webkit-order: 2;
   order: 2;     
}
10
Adrift

La réponse d'Adrift est parfaite; mais un changement pour le rendre plus flex serait

#left{
    flex-basis: 200px;
    flex-grow: 0;
    flex-shrink: 0;
}

Et supprimez entièrement la propriété width.

Ce serait la manière flex de dire que l'élément aura une largeur invariable de 200px

113
vals

Donner la #left div a min-width de 200px, devrait faire le travail.

5
gpgekko

ajouter display: contents sur l'élément ou div dont vous souhaitez conserver la largeur.

1
Hassan Azimi

Aussi (si rien de ce qui précède ne fonctionne)

Vérifiez votre largeur min et largeur max. Il a résolu le même problème pour moi en augmentant leur portée.

1
BoogieBill