Moving this discussion here
Imagine that a component author develops a .component with a responsive design. Their goal is to say "respond to the available space". At some level this lets a page author provide a <link to the .component styles> and then just start using their component and the 'right' design for the space should always Just Work™. However, the following page illustrates a challenge with the way we've currently spec'ed - what should this page render, and how should it do that?
<link to the .component styles>
<style>
body { display: grid; grid-template-columns: 1fr 1fr; }
</style>
<div class="component"> ... </div>
<div class="component"> ... </div>
As spec'ed today, I believe this would either render nothing, or its paints would overflow the bounds in the horizontal direction (depending on if we specify to allow overflow). I'm not sure whether I can even think of a workaround or pattern I could teach that lets me do something probably acceptable here, but someone has some ideas?
We could make the intrinsic size contributions 0 in only one axis, but @Loirooriol suggests that this can be "problematic for orthogonal flows and aspect ratios and things like that." And that there is https://drafts.csswg.org/css-grid/#algo-single-span-items but "here we can use selectors to freely change the contents, which affects the content sizes, so we can have loops."
Moving this discussion here
Imagine that a component author develops a
.componentwith a responsive design. Their goal is to say "respond to the available space". At some level this lets a page author provide a<link to the .component styles>and then just start using their component and the 'right' design for the space should always Just Work™. However, the following page illustrates a challenge with the way we've currently spec'ed - what should this page render, and how should it do that?As spec'ed today, I believe this would either render nothing, or its paints would overflow the bounds in the horizontal direction (depending on if we specify to allow overflow). I'm not sure whether I can even think of a workaround or pattern I could teach that lets me do something probably acceptable here, but someone has some ideas?
We could make the intrinsic size contributions 0 in only one axis, but @Loirooriol suggests that this can be "problematic for orthogonal flows and aspect ratios and things like that." And that there is https://drafts.csswg.org/css-grid/#algo-single-span-items but "here we can use selectors to freely change the contents, which affects the content sizes, so we can have loops."