Warum erzeugt grid-template-columns vertikalen Whitespace?

[Rolf B]

Hallo Rolf,

so, Update.

Du hast da eine dreifache Schachtelung von Layouts.

#container    - flexbox
   main       - flexbox
      section - grid
         table

Soweit ich das nachstellen konnte, berechnet die #container-Flexbox die Höhe, die sie für das main-Element benötigt, auf Grund des Inhaltes von <main>. Aber: Ohne zu beachten, dass die Section darin ein Grid ist. Deswegen wird das main-Element zu hoch berechnet, wenn das Grid mehr als die Table enthält. Dein "HEADLINE!" war falsch platziert und wurde deshalb vom Browser als Textelement vor die Table gezogen, damit ergaben sich zwei Grid-Items. Die Höhe von main ist korrekt, wenn die Section kein Grid ist. Durch das Grid kommen Text und Table nebeneinander, die benötigte Höhe sinkt, und damit ist der Inhalt der Section nun zu klein für's main Element.

Wenn man dem #container die Flexbox wegnimmt, stimmen die Höhe von main und section wieder überein. Das erkennt man gut, wenn man den beiden eine border gibt.

Das ist in Firefox und Chrome so, deswegen dürfte das "by design" sein und kein Browserbug. Vermutlich aus Performance-Gründen.

Gerade noch entdeckt: Wenn Du dem #container das Flex-Wrapping wegnimmst (brauchst Du das?), funktioniert die Größenberechnung korrekt!

@Gunnar Bittersmann - was ist das für ein merkwürdiger Zusammenhang?

Rolf