"Child elements don’t expand the dimensions of the parent." it says

[johndeighan]

That's what it says in the CSS Escape Plan book. And I think it should be that way, but unfortunately, it isn't. I have a simple layout with a column of 3 elements: 1) a header/menu bar, 2) a main content area and 3) a footer. The main content area has attribute "height fill", so when the main content area is empty, the footer is at the very bottom of the viewport (where I want it to stay). So far, so good. However, if I put a lot of text into the main content area, the footer gets pushed off screen. Since I haven't yet tried to add scroll bars, I knew the text would overflow, but I expected the footer to stay where I put it, and the text to simply write over the footer.

There is an Ellie (if I did it right) at https://ellie-app.com/s6dh4QmdCB6a1. However, the code is pretty simple, so here it is:

module Main exposing(main)

import Element exposing(..)
import Element.Border as Border
import Element.Font as Font
import Element.Background as Bkg

gray level =
   rgb level level level

longString len =
   let
      str = "The quick brown fox jumped over the lazy, rotten dog. "
      strlen = String.length str
      count = floor (len / toFloat strlen)
   in String.repeat count str

main =
   layout
      []
      (column
         [
            explain Debug.todo,
            width fill,
            height fill
            ]
         [
            el
               [width fill, Bkg.color (gray 0.4)]
               (el
                  [
                     centerX,
                     Font.color (gray 1)
                     ]
                  (text "Menu Bar")
                  ),
            el
               [
                  width fill,
                  height fill,
                  Bkg.color (gray 0.8)
                  ]
               (paragraph []
                  [
                     (el [] (text (longString 10000)))
                     ]
                  ),
            el
               [width fill, Bkg.color (gray 0.4)]
               (el
                  [
                     centerX,
                     Font.color (gray 1)
                     ]
                  (text "Footer")
                  )
            ]
         )

Clearly, the amount of text I put in the child element is, in fact, expanding the dimensions of the parent.

Versions

• OS: Windows 11
• Browser Chrome
• Browser Version Version 128.0.6613.85 (Official Build) (64-bit)
• Elm Version 0.19.1
• Elm UI Version 1.1.8