Breite bei Flexbox-Elementen ignoriert

76

Ich habe width: 200px;links eingestellt, <div>aber wenn ich es mit dem Browser-Inspektor-Tool ansehe, scheint die tatsächliche Breite zufällig zu sein oder so. Es ändert sich ständig je nach Fenstergröße.

Warum wird die Breite nicht wirksam?

BEARBEITEN : Wenn ich entferne, width: 100%bleibt die Breite fest. Aber ich brauche das, damit das #maindiv die verbleibende Breite annimmt :( Gibt es eine Möglichkeit, die Seitenleiste bei fester Breite zu haben und die andere <div>den Rest der Containerbreite auszufüllen? width: auto;On #mainfunktioniert nicht.

css width flexbox

— Alex
quelle

2

Ist das nicht die ganze Idee einer Flexbox, die sich beim Ändern der Fenstergröße ändert?

— Gpgekko

2

Ja, aber ich möchte nur, dass 1 Flex-Säule die Breite ändert: P

— Alex

1

Versuchen Sie flex-flow: wrap;, dem Container

— hinzuzufügen

1

fyi: Flex-Shrink ist standardmäßig 1

— Hayden Thring

13

Entfernen Sie die Breite auf .container > divund verwenden Sie flex: auto;auf #main: Geige

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

— Jason Yaraghi
quelle

172

Die Antwort von Adrift ist perfekt; aber eine Änderung, um es flexibler zu machen, wäre

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

Und entfernen Sie die Eigenschaft width vollständig.

Es wäre die flexible Art zu sagen, dass das Element eine unveränderliche Breite von 200px haben wird

— vals
quelle

42

Kurzschrift:flex: 0 0 200px;

— Dan

20

Fügen Sie einfach eine flex-shrink: 0Eigenschaft hinzu, und die CSS-Breite wird berücksichtigt.

— Ashish Rawat

Dies zusammen mit order: 2(um es nach rechts zu schalten) funktionierte einwandfrei, um eine Seitenwand zu erstellen. Vielen Dank!

— Robert Molina

1

Ich wollte nur hinzufügen, dass ich nur flex-shrink: 0mein persönliches Problem beheben musste (wo es flex: autoallein nicht behoben wurde)

— Jawad

18

Meine bevorzugte Art, mit dieser Situation umzugehen, besteht darin, Folgendes hinzuzufügen:

flex-shrink: 0;

Auf diese Weise können Sie die Verwendung widthin Ihrem Flex-Container fortsetzen und ihm spezifische Informationen darüber geben, wie sich dieses Flex-Element verhalten soll.

Eine weitere Option, abhängig von der Anforderung, ist die Verwendung min-width, die bei der Verwendung von Flex berücksichtigt wird .

— BassMHL
quelle

7

Geben Sie dem #leftdiv ein min-widthvon 200px, sollte den Job machen.

— gpgekko
quelle

0

display: contentsFügen Sie das Element oder div hinzu, für das Sie die Breite beibehalten möchten.

— Hassan Azimi
quelle

0

Auch (wenn nichts von oben funktioniert)

Überprüfen Sie Ihre minimale und maximale Breite . Es hat das gleiche Problem für mich behoben, indem ich ihre Reichweite vergrößert habe.

— Vasilis Siourdas
quelle

-4

display:inline-block;In der linken Klasse hinzufügen

— rjdmello
quelle

1

Das OP verwendet jedoch Flex :)

— Gavin