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

[JBetz]

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

• Elm: 0.18
• style-elements: 4.1.0
• Browser: Chrome + Firefox

[cgudrian]

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]

@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?