Bug 244844 – Incorrect width for elements with position:absolute, padding-left:50px, width:fit-content, and box-sizing:border-box

• Component: CSS
• Status: RESOLVED DUPLICATE

[Terluin Webdesign]

The width of an element is incorrect (too narrow) if the following conditions are met:
1. Property 'position' is set to 'absolute' or 'fixed'.
2. Property 'padding-left', 'padding-right', 'border-left-width', or 'border-right-width' are set to anything but '0px', for instance: '50px'.
3. Property 'width' is set to 'fit-content', 'min-content', or 'max-content'.
4. Property 'box-sizing' is set to 'border-box'.

An example to be able to recreate:
<div style="padding-left:50px;width:fit-content;position:absolute;top:0px;left:0px;">
  <div style="padding:50px;background:#000;color:#fff;font-size:25px;">Text</div>
</div>

If you add up the left and right padding and the left and right border width, then that is the amount of width that the element is missing.
So, if I apply 'padding-left: 50px', then the element becomes '50px' too narrow.


The height of an element is incorrect (too tall) if the following conditions are met:
1. Property 'position' is set to 'absolute' or 'fixed'.
2. Property 'padding-top', 'padding-bottom', 'border-top-width', or 'border-bottom-width' are set to anything but '0px', for instance: '10px'.
3. Property 'height' is set to 'fit-content', 'min-content', or 'max-content'.
4. Property 'box-sizing' is set to 'border-box'.

If you apply 'padding-top: 10px' to such an element, then its height would go from '30px' to '50px' (double the amount of top padding).

An example to be able to recreate:
<div style="padding-top:10px;height:fit-content;position:absolute;top:0px;left:0px;width:100px;">
  <div style="background:#000;width:100%;height:30px;"></div>
</div>

[Terluin Webdesign]

*** This bug has been marked as a duplicate of bug 232816 ***