Zitat:
|
Könnte mich da mal jemand aufklären was da los ist, wieso die Speise nicht so breit ist wie in der CSS festgelegt
|
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:
Code:
display: grid;
grid-template-columns: 1fr 2fr;
Dadurch ist das Verhältnis der beiden Spalten immer 1 zu 2.