[css-flexbox] [css-sizing] Interaction of min-height and box-sizing: border-box

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|

[css-flexbox] [css-sizing] Interaction of min-height and box-sizing: border-box

Christian Biesinger-3
Hi there!

With a testcase like this:

<div style="height: 20px; min-height: min-content; box-sizing:
border-box; padding-top: 50px;">
  <div style="height: 50px; width: 50px;"></div>
</div>

What should the final size of the div be? Clearly, min-content here is
a 50px content-box or 80px border-box. But sizes in min-height get
adjusted by box-sizing. Do we insert the 50px content-box into
min-height, then adjust by box-sizing, and get an effective min-height
or 30px? Or not?

And (for the css-flexbox part of the question), does it make a
difference when this happens in the context of min-height: auto?

xref https://bugs.chromium.org/p/chromium/issues/detail?id=549863

Thanks,
-Christian

Reply | Threaded
Open this post in threaded view
|

Re: [css-flexbox] [css-sizing] Interaction of min-height and box-sizing: border-box

fantasai
On 06/23/2016 05:40 PM, Christian Biesinger wrote:

> Hi there!
>
> With a testcase like this:
>
> <div style="height: 20px; min-height: min-content; box-sizing:
> border-box; padding-top: 50px;">
>    <div style="height: 50px; width: 50px;"></div>
> </div>
>
> What should the final size of the div be? Clearly, min-content here is
> a 50px content-box or 80px border-box. But sizes in min-height get
> adjusted by box-sizing. Do we insert the 50px content-box into
> min-height, then adjust by box-sizing, and get an effective min-height
> or 30px? Or not?
>
> And (for the css-flexbox part of the question), does it make a
> difference when this happens in the context of min-height: auto?
>
> xref https://bugs.chromium.org/p/chromium/issues/detail?id=549863

box-sizing only affects the interpretation of <length> and <percentage>
values: border-box changes their meaning to subtract out the border and
padding widths before applying those values to the content-box.

It therefore has no effect on any of the keyword values of 'width' and
'height'.

~fantasai

Reply | Threaded
Open this post in threaded view
|

Re: [css-flexbox] [css-sizing] Interaction of min-height and box-sizing: border-box

Christian Biesinger-3
On Thu, Jun 23, 2016 at 6:53 PM, fantasai <[hidden email]> wrote:

> On 06/23/2016 05:40 PM, Christian Biesinger wrote:
>>
>> Hi there!
>>
>> With a testcase like this:
>>
>> <div style="height: 20px; min-height: min-content; box-sizing:
>> border-box; padding-top: 50px;">
>>    <div style="height: 50px; width: 50px;"></div>
>> </div>
>>
>> What should the final size of the div be? Clearly, min-content here is
>> a 50px content-box or 80px border-box. But sizes in min-height get
>> adjusted by box-sizing. Do we insert the 50px content-box into
>> min-height, then adjust by box-sizing, and get an effective min-height
>> or 30px? Or not?
>>
>> And (for the css-flexbox part of the question), does it make a
>> difference when this happens in the context of min-height: auto?
>>
>> xref https://bugs.chromium.org/p/chromium/issues/detail?id=549863
>
>
> box-sizing only affects the interpretation of <length> and <percentage>
> values: border-box changes their meaning to subtract out the border and
> padding widths before applying those values to the content-box.
>
> It therefore has no effect on any of the keyword values of 'width' and
> 'height'.

Thanks! I fixed this bug in Chrome now; we got that wrong in a few cases.

-Christian