Styles not being applied to content height

[ivnsch]

The big picture of what I'm trying to do

Apply a style to a vertically scrollable area with content height. E.g. a shadow or a background image.

What I did

https://ellie-app.com/c65RQMcbYa1/2

What I Expected To Happen

The shadow surrounds the complete area.

What Actually Happened

The shadow only is applied to the part of the area that's initially visible (what would be height fill). This happens with css background images as well.

Notes:

• Using a fixed height instead of content fixes the issue. This is of course not a very practical solution.
• Setting yScrollbar on the column with the scrollable content also fixes the issue, but this makes the scrollbar appear inside the column (as probably expected) which is not necessarily wanted.

Edit In Chrome I was able to fix it by adding height: fit-content as a custom attribute, to the div with the shadow/background. But seems to be an invalid property in Firefox. In Firefox actually there was no value for height that would make the parent div take the height of the children.

Versions

• Elm: 0.18
• style-elements: 4.2.1
• Browser: Chrome h62.0.3202.94 (Official Build) (64-bit), Firefox Quantum 57.0.1 (64-bit), probably others
• Operating System: macOS 10.12.6

[mdgriffith]

Switching height to minHeight on the parent row resolved it like we spoke on slack. Thanks for the issue!