Invalid width for parent element inline-block

Question

I work with HTML / CSS that aligns <li> elements horizontally using a variety of display:inline-block rules. I traced the JS error to $("ol").width() , which incorrectly measures the width of an element - apparently due to the width of the <li> content?

Here is an example of a problem: http://jsfiddle.net/q01ng8b6/ - note how the red frame of the <ol> element does not go all the way around the content:

Here's an example of how removing width in the <li> content captures the size of my <ol> element: http://jsfiddle.net/q01ng8b6/1/ - notice how the red border correctly goes all the way around the content.

I don’t understand what is happening here - as a rule, changing the width of the "grandchildren" has such a strong effect on the width of my <ol> element? Is this a browser bug or a standard?

Answer 1

This is probably not a browser error, but perhaps an inadequately strictly defined specification.

What seems to be happening is that calculating the width of the elements li has several solutions. Its width depends on its contents (compressed to fit), and its width depends on their container (100%). Any value from 0 to infinity will work.

Now, for the ol element, the compression and matching algorithm is applied. From the basic CSS base block model

The calculation of the shrinkage width for matching is similar to the calculation of the width of a table cell using an automatic table layout algorithm. Rough: calculate the preferred width by formatting the content without breaking lines other than where explicit line breaks occur, and also calculate the preferred minimum width, for example, by trying all possible line breaks. CSS does not define an exact algorithm. Third, find the available width: in this case, the width of the containing block minus the used values ​​of "margin-left", "border-left-width", "padding-left", "padding-right", border-right -width, 'margin-right and the width of any corresponding scrollbars.

Then the width of shrinkage to the stop: min (maximum (preferred minimum width, available width), preferred width).

Define in more detail using the text of David Baron.

The specification is clearly inadequate for this case, but it seems that for the preferred minimum width, a solution of width li = 0 is used, while for the preferred width, the solution of lithium width = inner width img is used. These choices seem unfounded to me, but I don’t know any part of the specification that requires them.

Assuming these values ​​for your example, the width of the ol element is the available width that you see.

Of course, the width of li and img cannot be displayed in several solutions, and there is nothing to limit the width of the elements li, which should be proportional to their container, so they display the img elements in accordance with the internal widths, overflowing them ol.

Answer 2

You may need to adjust the position of the parent and child to make the container grow with them. eg.

 .my-horizontal-ul { border:1px solid red; margin:0; padding:0; list-style:none; white-space:nowrap; position:absolute; } .my-horizontal-ul li { display:inline-block; position:relative; } .my-horizontal-ul li img { } 

Check out Fiddle