Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account
Jump to bottom

[css-tables][css-flexbox] Table flex items with main size less than preferred intrinsic width #2442

Closed
mstensho opened this issue Mar 15, 2018 · 3 comments
Closed

[css-tables][css-flexbox] Table flex items with main size less than preferred intrinsic width #2442

mstensho opened this issue Mar 15, 2018 · 3 comments
Assignees
@FremyCompany
Labels
Closed Accepted by CSSWG Resolution css-flexbox-1 Current Work css-tables-3 Current Work Needs Testcase (WPT) Tracked in DoC
Projects
css-tables-3

Comments

@mstensho
Copy link

The engines differ greatly when it comes to sizing of table flex items. Edge and Firefox, on one hand, seem to use the table sizing algorithm extensively, and there's generally no support for flexing.

<p>There should be a green square, and no red.</p>
<div style="display:flex; width:200px; background:red;">
  <div style="display:table; flex:1 1; width:10px; height:200px; background:green;"></div>
</div>

Chrome, on the other hand, leave the flex sizing algorithm in charge, and the above test passes.

I'm pretty sure Chrome is doing the right thing here, but it causes a compatibility problem, if the specified main size is less than the intrinsic minimum width of the table.

<p>Shouldn't there be a green square, and no red?</p>
<div style="display:flex; width:200px; background:red;">
  <div style="display:table; width:10px; height:200px; background:green;">
    <div style="width:200px; height:10px; background:green;"></div>
  </div>
</div>

See https://bugs.chromium.org/p/chromium/issues/detail?id=821832

What's the desired behavior? Invalid bug? Ignore specified main size when resolving min-width:auto (initial value), and only honor intrinsic minimum width?

Fun fact: Both above tests pass in Presto. :)
@FremyCompany
Copy link
Contributor

I didn't take a close look, but at first sight the table should overflow the space that's allocated to it. It cannot be smaller than its minimum width. Re the interop issue on flexing, we resolved at some point Chrome was doing it right.

@css-meeting-bot
Copy link
Member

The Working Group just discussed Table flex items with main size less than preferred intrinsic width.

The full IRC log of that discussion <dael> Topic: Table flex items with main size less than preferred intrinsic width
<dael> github: https://github.com//issues/2442
<dael> TabAtkins: If you have a table that's flex item the flex sizing algo tells it what size to be but that's can be smaller then the table's min size. What happens? Edge and FF only use table sizing algo. Chrome flexes the table, but I'm not sure if it flexes more then minimum size.
<dael> TabAtkins: fremy says table should flex and overflow to it's min size. I agree.
<dael> astearns: Anyone disagree that tables flexed to smaller then their minimum size should overflow?
<dael> fantasai: It should be a min-size.
<dael> TabAtkins: Does that happen?
<dael> fantasai: We shouldn't be like the flex item is smaller then it actually is. If the table has a min-size it should be reflected in the min size in the algo.
<dael> TabAtkins: If it has a specified size to . Content of 200px but width of 10px. It'll be 200px but we don't go down a path to look at the contents.
<dael> fantasai: THe table has a minimum size that's not reflected in min-size property. Max of specified min size and min size from table layout should be the size.
<dael> TabAtkins: Yes, that makes sense.
<dael> dbaron: And only for auto layout things?
<dael> fantasai: Yes.
<dbaron> s/things/tables/
<dael> Rossen: If width is spec it's still a min-width
<dael> rune_: Flex consideres and explicit width as a min-width?
<dael> TabAtkins: At all times tables cannot shrink below their minimum content
<dael> rune_: Can you put that in the spec somewhere?
<dael> TabAtkins: Sure.
<cbiesinger> s/rune_/cbiesinger/
<dael> TabAtkins: Between flexbox and table spec we'll put this.
<dael> fantasai: Used min-width of a table considers the content of the table and then we make sure flexbox hooks into that.
<dael> astearns: We only want flex algo to key of used min-width for tables.
<dael> fantasai: No reason for it not to in general. We just need to make sure correct terms are in flexbox and that tables has that concept.
<dael> astearns: Used min-width isn't a term?
<dael> fantasai: It is, but we need to make sure tables spec uses it.
<dael> astearns: Used means layout has happened.
<dael> TabAtkins: This is a flex item.
<dael> rune_: You need min-width before you layout flex item.
<dael> TabAtkins: Sure. Tables need to do layout earlier.
<cbiesinger> s/rune_/cbiesinger/
<dael> fantasai: Just calc min-content width.
<dael> astearns: Prop: define what used min width is for tables and to make sure the flex algo uses that.
<dael> astearns: That's the approach we're taking. Let's have you all come up with proposed edits.
<dael> cbiesinger: Anything else have the used min-width?
<dael> fantasai: No. Nothing else has a used min-width that depends on random other information.
<dael> astearns: Anything more on this?

fantasai added a commit that referenced this issue May 2, 2018
@fantasai
[css-flexbox-1] Clarify that min/max clamping uses used values. #2442
66241e4
@fantasai
Copy link
Collaborator

@FremyCompany, I checked in the edits to Flexbox for this (clarifying that we used the used value of the min size properties for clamping). Can you make sure Tables defines that appropriately to account for the table’s min-content size in auto layout?

@fantasai fantasai added css-tables-3 Current Work and removed Agenda+ F2F labels May 2, 2018
fergald pushed a commit to fergald/csswg-drafts that referenced this issue May 7, 2018
@fantasai @fergald
[css-flexbox-1] Clarify that min/max clamping uses used values. w3c#2442
c77debf
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@FremyCompany FremyCompany

Labels
Closed Accepted by CSSWG Resolution css-flexbox-1 Current Work css-tables-3 Current Work Needs Testcase (WPT) Tracked in DoC
Projects
css-tables-3
DOC
Milestone
No milestone
Development

No branches or pull requests
5 participants
@FremyCompany @tabatkins @fantasai @mstensho @css-meeting-bot