[css-sizing] How to shrink to fit the width?

[yisibl]

In this demo: http://jsbin.com/weqapufoyi/edit?html,css,output

Because span float will automatically wrap, how to make the parent element shrink to the "Expectation" effect.

Can we add a new width/height value(e.g. width: auto-shrink), or already have other solutions?

spec: https://drafts.csswg.org/css-sizing/#width-height-keywords

cc @dholbert @tabatkins @fantasai

[SebastianZ]

I think the best would be to adjust fit-content (in combination with max-width/max-height) and fit-content() accordingly to shrink automatically to the size of the content.

Sebastian

[yisibl]

@SebastianZ That would be best.

[tabatkins]

No, fit-content() won't work here. fit-content is "try to be max-content size, clamped by min-content and the specified limit" (or in the case of the fit-content keyword, clamped above by the available space). So using fit-content() will still make it the full size with empty space, as shown in the first example. You can see this behavior today in floats - create a float containing a few very long words, and when they break, the float doesn't "tightly wrap".

Tight wrapping has been discussed in the past, but has never made it in yet.

[fantasai]

On 06/22/2016 02:10 AM, Tab Atkins Jr. wrote:

Tight wrapping has been discussed in the past, but has never made it in yet.

See discussion at https://www.w3.org/mid/54DAAD2C.6060704@inkedblade.net

~fantasai

[vasilisvg]

I have the same issue on one of my sites, as I tried to explain here. And today the CSSWG Twitter account told me that it’s been discussed here on Github. Hurray! I was wondering, is there any progress on this?

[fantasai]

No progress yet, though we're glad to have your use cases tracked here. :) I think the blocker here will be largely the difficulty for implementations in doing something relatively difficult and expensive, so seeing where it's needed is helpful to justify the effort.

[Nadya678]

Please add this option. I also need it. JS solution is complicated because during resizing window there must be made additional steps...