Hallo Leute,

Ich habe ein ganz einfaches Layout mit zwei Spalten, welches mit flexBox umgesetzt ist, aber die linke Spalte hat nicht die gewünschte Breite und das verstehe ich überhaupt nicht.

Flexbox 2 columns

Könnte mich da mal jemand aufklären was da los ist, wieso die Speise nicht so breit ist wie in der CSS festgelegt

flex heißt, das ganze ist "flex-ible". Also nicht fix.
Das ist die große Stärke von flexbox: Es passt sich flexibel dem verfügbaren Platz an.

Man kann das Verhalten aber auch ausstellen indem man festlegt ob ein Element größer oder kleiner wird.

Gibst du zB deinem side-Element ein flex-shrink: 0, dann heißt das, dass das Element nicht kleiner werden darf.

Es gibt zusätzlich auch flex-grow property, welches festlegt wie das Element wachsen darf.

Zusätzlich dazu gibt es auch flex-basis property welches die basis-Größe eines flex Elements festlegt.

Da liegt ein Verständnisproblem bei dir vor. Die Spalte wird so breit angezeigt wie du mittels CSS bestimmt hast.

CSS funktioniert aber nicht intuitiv. Man muss lernen was welche Angaben bewirken. Zusätzlich kniffelig wird es mit Prozentangaben.

Bei Flexbox wird die Breite der Spalten nach unterschiedlichen Kriterien abhängig vom Inhalt und vom Leerraum automatisch verteilt. Sachlich ist Flexbox eine sogenannte Leerraumverteilung.

Nach dieser automatischen Verteilung sind die Spalten unterschiedlich breit, bei zwei Spalten eine zum Beispiel 350px und die daneben 780px. Jede dieser Spalten ist für sich aber wiederum 100% breit. Wenn du für die linke Spalte bei der Breite (width) nun 33,33% angibst ist die Breite nur noch 33,33% von 350px, also ungefähr 116px.

Du willst offensichtlich die linke Spalte 33,33% und die rechte Spalte 66,66% breit haben. Dazu ist CSS-Grid (display: grid) mit der neuen Einheit fr besser geeignet.

Dazu solltest du die Anweisungen "display: flex" und "width" entfernen. In die Klasse "flexbox" trägst du dann zwei Zeilen ein:

Dadurch ist das Verhältnis der beiden Spalten immer 1 zu 2.

Vielen Dank die beiden für eure detaillierten Informationen.

Da habe ich wohl bisher einiges falsch verstanden.

Wie mache ich es am besten, wenn ich ein Layout mit zwei Spalten haben möchte, die beide zusammen eine Breite von 100 % haben und die linke Spalte eine feste Breite von zum Beispiel 320 Pixel haben soll???

Indem du bei CSS-Grid die Breiten anpasst:

Die linke Spalte wird 320px breit und die rechte Spalte schnappt sich den restlichen zur Verfügung stehenden Platz.

Danke für den Tipp!
Warum mir jetzt nicht sicher, ob das mit Grid funktioniert oder nicht und wenn ja wie.
Kann das ganze aktuell nicht ausprobieren, aber morgen oder spätestens übermorgen sollte es möglich sein.
Dann kann man die beiden Spalten bestimmt auch durch eine Lücke trennen.
Beispielsweise so, oder?

Fast.

Fast, es ist
gap ist natürlich auch nicht ganz falsch, dann hat man einen Abstand zwischen rows- und columns Der grid- prefix fällt weg, da das auch für flexbox angewandt werden kann.

Ich bin auch ein Fan von grid, soll es aber nur um eine Zeile, also eindimensional sein, dann kann man auch theoretisch bei flexbox bleiben.

Die Lösung für dein Problem mit Flexbox habe ich schon gepostet, nur für den fall dass es untergangen ist:

flex-shrink: 0; zu deiner column hinzufügen wo du die breite definiert hast. Dann wird sie nicht kleiner.

Danke für deine Erläuterung!
Das hilft mir sehr weiter.

Vielen Dank euch beiden für eure Hilfe!
Schönen Tag noch

Wo kann man den nachschauen, bei was der grid- prefix weggelassen werden kann?