1244192 - "max-width: 100%" on a padded inline-block produces different sizing on its child, depending on whether child uses "max-width" or "width"

Status: RESOLVED FIXED

(Core :: Layout, defect)

Description

[Daniel Holbert [:dholbert]]

Attachment: testcase 1

STR:
 1. Load attached testcase (which includes 4 examples)
 2. Look at the final example (labeled "max-width: 100% on parent and child")

EXPECTED RESULTS:
Red-bordered area should not overflow the black-bordered container. (i.e. the inline-block should end up with a border-box that's 100px wide)

ACTUAL RESULTS:
Orange overflows (i.e. the inline-block ends up with a border-box that's 100px + 40px of padding + 2px of border wide.)


To be honest I'm not 100% sure what's correct here, but browsers are inconsistent. Details to follow.

Comment 1

[Daniel Holbert [:dholbert]]

Browsers seem to agree on the first, second, and third examples in the testcase. (Wide, wide, skinny)

But the final example (max-width: 100% on parent and child) they disagree.

* Firefox & IE11 render it as wide.
* Chrome 49, Safari 9, and Edge render it as skinny.

So we're the odd one out, among modern browsers, in our rendering of this testcase.  So even if we're correct (again, not sure), we might be forced to align with the others for compat reasons. (which might be why Edge is different from IE11)

Comment 2

[Daniel Holbert [:dholbert]]

This inconsistency between browsers was the root cause of at least one webcompat issue -- see https://github.com/webcompat/web-bugs/issues/1160#issuecomment-176857421

Comment 3

[Karl Dubost💡 :karlcow]

Wondering if it's not something in the same family as Bug 823483

Comment 4

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Fixed by bug 823483.

Comment 5

[Anthony JULOU]

Hi,

It seems that from version 46 images with the max-with = 100% attribute no longer appears in table in this case

<td>
  <a href="javascript:void(0)" onclick="clickEditButton()" title="Éditer">
   <img src="/media/system/images/edit.png" alt="Éditer"></a>
</td>

Comment 6

[Karl Dubost💡 :karlcow]

Anthony, 

thanks do you have an example somewhere we could test?

Comment 7

[Anthony JULOU]

No, because a login is necessary to access to that page.

I managed to display the image by editing the css :

#jevents_body td.buttonheading img 
{ max-width: none; }

<td class="buttonheading" align="right" width="20">
 <a href="javascript:void(0)" onclick="clickEditButton()" title="Éditer">
     	<img src="/media/system/images/edit.png" alt="Éditer"></a>
</td>