"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

[johndeighan]

In fact, adding the "scrollbarY" attribute on the middle element (i.e. the main content area) fixed the problem, i.e. the footer is once again at the bottom of the viewport and the content area gets a vertical scroll bar. However, I still regard this as a problem since it violates the "child elements don't expand the dimensions of the parent" rule. I'm also happy to see that the scroll bar only appears if the text is too long to fit. In fact, I would have preferred that this be the default behavior.