How do browsers calculate width when child depends on parent, and parent’s depends on child’s

by

To explain this, I will start with a more simplified example that will produce the same output:

<div style="display:inline-block">
  <img src="https://via.placeholder.com/1000x100">
</div>

<div style="display:inline-block">
  <img src="https://via.placeholder.com/1000x100" style="max-width:100%">
</div>

<div style="display:inline-block">
  <!-- even a big explicit width specified won't change the behavior -->
  <img src="https://via.placeholder.com/1000x100" style="wdith:2000px;max-width:100%">
</div>

<div style="display:inline-block">
  <img src="https://via.placeholder.com/1000x100" style="width:100%">
</div>

We have an inline-block element so its width depend on its content and the use of max-width:100% (or width:100%) will give us the strange result.

To understand this, we need to refer to the specification and more precisely Percentage Sizing section where we can read:

Sometimes the size of a percentage-sized box’s containing block depends on the intrinsic size contribution of the box itself, creating a cyclic dependency. When calculating the intrinsic size contribution of such a box (including any calculations for a content-based automatic minimum size), a cyclic percentage—that is, a percentage value that would resolve against a containing block size which itself depends on that percentage—is resolved specially:

Our box is the image and the containing block is the inline-block div. The image is a replaced element so we need to follow the (b) and (c) to identify the max-content contribution and the min-content contribution

b. Likewise, if the box is replaced, then the entire value of any max size property or preferred size property specified as an expression containing a percentage that is cyclic is treated for the purpose of calculating the box’s max-content contributions only as that property’s initial value.

Considering max-width/width as auto will keep the max-content contribution the same (1000px in our case). What will change is the min-content contribution:

c. If the box is replaced, a cyclic percentage in the value of any max size property or preferred size property (width/max-width/height/max-height), is resolved against zero when calculating the min-content contribution in the corresponding axis.

So the min-content contribution of the image will become 0 and no more 1000px which was the initial min-content contribution based on its intrinsic dimension (related: https://www.w3.org/TR/css-sizing-3/#intrinsic-sizes) and all the trick is here!

Now our inline-block is a shrink-to-fit element and the following algorithm apply:

Then the shrink-to-fit width is: min(max(preferred minimum width, available width), preferred width). ref

the contribution of the image will vary from 0 to 1000px so the browser will pick the value that will avoid any overflow (the available width part) and not bigger than 1000px (the min part)

Without the use of percentage the min-content of the image was 1000px so the browser is obliged to use a value between 1000px and 1000px as preferred minimum width which will give the div the intrinsic size width of the image.

All this is only the calculation of the div width. After this, we consider the calculated width as a reference for our percentage value.

We can also consider different value and the logic will be the same:

div {
  border:2px solid red;
  margin:5px;
}
<div style="display:inline-block">
  <img src="https://via.placeholder.com/1000x100">
</div>

<div style="display:inline-block">
  <img src="https://via.placeholder.com/1000x100" style="max-width:80%">
</div>

<div style="display:inline-block">
  <img src="https://via.placeholder.com/1000x100" style="width:50%">
</div>

The above logic apply the same way to your code since your column is set to auto which means that its size is based on its content and is also the containing block of the image.

More Related Contents:

  1. CSS-only masonry layout
  2. How to make an element width: 100% minus padding?
  3. Centering in CSS Grid
  4. Flex / Grid layouts not working on button or fieldset elements
  5. Center and bottom-align flex items
  6. Make grid container fill columns not rows
  7. Grid properties not working on elements inside grid container
  8. Make a grid item span to the last row / column in implicit grid
  9. CSS grid square layout [duplicate]
  10. minmax() defaulting to max
  11. Preventing double borders in CSS Grid
  12. Grid areas not laying out properly in CSS Grid
  13. Why is my Grid element’s height not being calculated correctly?
  14. Why display grid with 100% in grid-template-columns goes out of body?
  15. How to make div’s percentage width relative to parent div and not viewport
  16. Make row stretch across all columns in CSS Grid
  17. All widths set to width of widest element
  18. How to make images stay within the rows of a css grid container?
  19. Understanding grid negative values
  20. Make an image width 100% of parent div, but not bigger than its own width
  21. grid-auto-flow in snake lines?
  22. CSS grid wrapping
  23. How can I create a row-based masonry layout using CSS?
  24. Items that span all columns/rows using CSS grid layout
  25. Change the column order in a css grid
  26. How to make CSS Grid items take up remaining space?
  27. How to flatten nested divs to display them in a CSS grid?
  28. Word wrap a link so it doesn’t overflow its parent div width [duplicate]
  29. CSS Grid with variable number of “auto” rows, but one row should take “1fr”
  30. How to calc() the number of rows in a grid template?

Leave a Comment