Cannot get column to overflow with scrollbar

[kuon]

I am trying to get the following to work:

module Main exposing (main)

import Color
import Element as El exposing (Element)
import Element.Background as Background
import Element.Border as Border
import Element.Events as Events
import Element.Font as Font
import Html exposing (Html)

main : Html msg
main =
    El.layout [] <|
        El.column
            [ El.height El.fill
            ]
            [ header
            , content
            ]

header =
    El.el
        [ El.height (El.px 80)
        , Background.color Color.red
        , El.width El.fill
        ]
        El.empty

content =
    El.column [ El.height El.fill, El.scrollbarY ]
        [ item
        , item
        , item
        , item
        , item
        , item
        , item
        , item
        ]

item =
    El.column
        [ El.alignLeft
        , Background.color Color.green
        , El.paddingXY 10 0
        ]
        [ El.el
            [ El.height (El.px 500)
            ]
            (El.text "some content")
        ]

This will overflow the body and the scrollbar will be on the body element instead of the column below the header

[Zinggi]

@kuon Did you find a workaround? I'm trying to create a layout with a sticky header + footer (like in an app), but I can't get it to work.

Here's what I tried: https://ellie-app.com/9Hsshmdd9a1/1

[kuon]

I used inline style to fix the layout.

[Zinggi]

@kuon could you elaborate a bit more please?
I tried various things, but I'm lost when it comes to CSS. I'd greatly appreciate your help!

[Zinggi]

I managed to get it working by setting the height of all wrapping elements to 100%. This works for me, but it's obviously a hack.

Here's the updated ellie

[kuon]

You can do it with a simple min-height: 100vh on the wrapper:

https://ellie-app.com/3nYVpdjMga1/0

[Zinggi]

Thanks, this is nicer than my workaround. (You must have meant max-height: 100vh, like this)

[Tweega]

The 100 vh trick does not get me out of jail when overflow text appears in a child element as it refers to the whole window.

this ellie has @Zinggi's lorem ipsum in a corner of the screen

I can take a proportion of the window height as a reasonable work-around, but for me this issue asks the question of when a child element can be expected to change its parent's dimensions.

The act of setting a scrollbar on an element indicates an expectation that there may be an overflow, and hence an implication that the element should either have a fixed size or maximum size. In the presence of the scrollbar attribute, it would be great if general dimensions (fill/fillPortion) could be translated to absolute ones where an ancestor exists with fixed dimensions. @