El in row doesn't shrink wrap child when min width set

mdgriffith / elm-ui

What if you never had to write CSS again?

https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/

BSD 3-Clause "New" or "Revised" License

1.35k stars 110 forks source link

El in row doesn't shrink wrap child when min width set #270

Open Orasund opened 3 years ago

Orasund commented 3 years ago

SSCCE

If an element within a row has height shrink along with a min width, it will always take the minimum width regardless of the greater width of any child element.

This is a similar problem to #262, though possibly unrelated.

Expected behavior Changing row to column fixes the problem: The width is now the biggest width of all child elements but at least the minimum width.

Versions

OS: Win 10
Browser: Chrome
Browser Version: 88
Elm Version: 0.19.1
Elm UI Version: 1.1.6. , 1.1.7 and 1.1.8 (have not checked anything before 1.1.6)

snaguf commented 3 years ago

I run into this issue too. I turns out that this is reproducible with both row and column as parents. When column is the parent, children el [ height (shrink |> minimum 100 ] is fixed with minimum height. When parent is row, as stated before affected attribute is width.

I found out that a hacky solution is to wrap the children inside another el.

I also reviewed the before mentioned issue #262 and can confirm that removing !important from min-width fixed this issue at least in Firefox DevTools.

coinop-logan commented 5 months ago

It is so sad to see this kind of issue still around. I love Elm UI, and even with this stuff it's better than the alternatives. Still, it makes me wonder about the future of this project...