On 18/12/14 20:33, fantasai wrote: > On 12/03/2014 03:18 AM, Sergio Villar Senin wrote: >> >> My point is, should we take into account {min/max}-{width/height} values >> set in the grid container when sizing the grid tracks? At least for me >> is not completely obvious. Let's use an example (assuming we're using >> Ahem font with size 10px). >> >> <div style="display: grid; width: min-content; min-width: 100px;"> >> <div style="grid-row: 1; grid-column: 1;">XXX XXX XXX</div> >> </div> >> >>> From my understanding there are 2 potential interpretations: >> a) min-width *does not* affect tracks sizing. >> >> So as the grid is under a min-content restriction that means that no >> extra space will be allocated so the track will be 30px wide (used >> breadth: 30px, max breadth: 110px). >> >> The grid container will be 100px wide anyway. >> >> b) min-width *does* affect tracks sizing. >> >> So despite being under min-content restriction we distribute space till >> we fulfill the min-width of the grid container. This means that the >> track will grow till 100px (used breadth: 100px, max breadth: 110px). >> >> Which is the right one? >> >> Now should b) be correct one, things become a bit complex because I >> guess we should also check that the values of {min/max}-{width/height} >> are definite. > > b) is the right one. Here's why. According to the definition I gave > for min/max-width/height, first we do layout ignoring them. The > track and the grid container are 30px wide. This violates the min > constraint on the grid container, so we redo layout with the width > value as 100px instead of 'min-content'. The track and the grid > container end up as 100px wide. > > Does that make sense? I'd like to bring this old thread back to life since I am not totally sure about the behavior you describe because AFAIK no web engine behaves like that for _heights_ in "normal" blocks (for widths it's exactly as you explained). Let's go over a simple example (http://jsbin.com/dibuniqaya/edit?html,css,output) div { font: 50px/1 Ahem; } .item1 { height: 50%; background-color: red; } .item2 { height: 50%; background-color: blue; } <div id="sample1" style="max-height: 30px;"> <div class="item1">XXX</div> <div class="item2">XXX</div> </div> <div id="sample2" style="height: 30px;"> <div class="item1">XXX</div> <div class="item2">XXX</div> </div> According to the definition you gave both blocks of code should behave the same because in sample1, we layout with "height: auto" and since the resulting height is >30px then we should proceed to layout with 30px. The items in sample2 are 15px height (50% of the container's height). Contrary to that, the items in sample1 are as height as their contents meaning that they weren't re-laid out (their percentage heights are still resolved to auto). So my question is, should we use the same behavior for grids? i.e. should we use min|max-height|width just to constraint the grid container? That would mean that in the following example: div { font: 10px/1 Ahem; } .grid { display: grid; grid-template-rows: minmax(10px, 100px); } <div class="grid" style="width: 40px; max-height: 20px;"> <div>XXXX XXXX XXXX XXXX</div> </div> the grid container would be 20px height but the grid row would be 100px height (as the height is indefinite). Is that correct? BRReceived on Tuesday, 29 September 2015 08:42:08 UTC
This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:57 UTC