Skip to content

[css-sizing] Stretch-fitting inline size next to floats. #4028

Description

@mstensho

https://drafts.csswg.org/css-sizing-4/#stretch-fit-sizing
https://drafts.csswg.org/css-sizing-3/#auto-box-sizes

The spec currently doesn't provide a size keyword to achieve this effect, but there used to be one named "fill-available", then renamed to "fill", "stretch" and/or "stretch-fit".

The behavior is partially defined, though, in level 3.
"The size a box would take if its outer size filled the available space in the given axis; in other words, the stretch fit into the available space, if that is definite."

Furthermore, the spec already refers to stretch-fit sizing as part of resolving fit-content, so my question is: How is stretch-fitting in the inline dimension affected by adjacent floats?

<style>
  .outerfloat { float:left; width:100px; height:100px; background:blue; }
  .stf { overflow:hidden; width:fit-content; background:yellow; }
  .spacer { float:left; width:300px; height:10px; }
</style>
<div style="width:500px;">
  <div class="outerfloat"></div>
  <div class="stf">
    <div class="spacer"></div>
    <div class="spacer"></div>
  </div>
</div>

Should the yellow box fit to the right of the yellow box, or go below, and use the entire width of its containing block?

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions