search

mdgriffith / style-elements

Create styles that don't mysteriously break!
http://package.elm-lang.org/packages/mdgriffith/style-elements/latest
BSD 3-Clause "New" or "Revised" License
445 stars 49 forks source link

`width content` doesn't size based on actual content width #102

Open JBetz opened 6 years ago

JBetz commented 6 years ago

I'm trying to use width content to automatically size elements, but it isn't working as expected. No matter what type of layout I use, the element always takes up 100% of the space available to it. This even happens when all of its child elements have widths with a specific length.

Example: https://ellie-app.com/6s4qgHd5Ga1/0

Versions

cgudrian commented 6 years ago

It works if you first wrap the column in a row

main : Html msg
main =
    Element.layout stylesheet <|
        row None
            []
            [ column Card
                [ width content, padding 10, spacing 5 ]
                [ h1 Heading [] (bold "Title")
                , row None [ spacing 5 ] [ bold "notes", text "something something" ]
                , row None [ spacing 5 ] [ bold "date", text "10/6/2017" ]
                ]
            ]
colinhunt commented 6 years ago

@cgudrian That is a good workaround, although I think the true issue remains. In your example, you can remove width content and it doesn't change the result, so it's redundant here.

The real issue seems to be that width content merely sets width: auto; in the css rather than width: fit-content; which is what I would expect it to do. If you inspect the css for the element in question and set it manually, it will do as expected (in Chrome at least).

@mdgriffith any insights into this issue?