Origin#
In this article, the issue of losing height: 100%; is mentioned halfway through. Specifically, the element does not have a height, and it is different from our expected height, which should be the same as the height of the parent element. This issue has triggered my thinking.
Searching#
Now that we have discovered this issue, we need to try to find its cause. After searching through most of the online resources, this issue is usually described as a height calculation infinite recursion problem. It means that when the height of the parent element is not specified and the height of the parent element is determined by the child element, but at this moment, another child element of the sub-element uses height: 100%;, causing continuous mutual inference between the parent and child elements, forming recursion, and resulting in the inability to calculate the height of the child element.
Solution#
Specify the container height#
Currently, the most common solution found online is to specify the specific height of the parent container to avoid recursion.
By seeing the example above, we feel that this specifying the container height can solve the problem. However, this specified form is too limited. In most cases, the containers in the development process are flexible in size. Therefore, this solution of specifying the container height cannot solve the problem. Appropriately, the following Flex/Grid/-webkit-box layout can solve the dynamic height problem.
Flex/Grid/-webkit-box layout#
These layouts have a common feature, which allows the child elements to dynamically calculate the height. This feature can completely solve the above problem.
In the W3C, this feature is described as follows:
Determine the used cross size of each flex item. If a flex item has align-self: stretch, its computed cross size property is auto, and neither of its cross-axis margins are auto, the used outer cross size is the used cross size of its flex line, clamped according to the item’s used min and max cross sizes. Otherwise, the used cross size is the item’s hypothetical cross size.
If the flex item has align-self: stretch, redo layout for its contents, treating this used size as its definite cross size so that percentage-sized children can be resolved.
Coincidentally, in the flex/grid layout, the default value of align-self for layout items is stretch.
-webkit-box#
The property display: -webkit-box; mentioned above, I found that it is used in many places, such as multi-line text ellipsis, and also to solve the issue of losing height: 100%;. However, it seems that we haven't really understood what this is, and there is very little information about it online. At most, I found that -webkit-box is a layout similar to Flex layout, but I couldn't find any other useful information. When I searched for information, I didn't know where to start.
Smart as I am, after thinking for a moment when I couldn't find relevant information on the internet search engine, I found chatgpt, and chatgpt provided a suitable answer.
When using the
display: -webkit-boxproperty, it sets the display mode of the element to a box model-based layout. This layout is similar to the flexbox layout but only applies to older versions of WebKit browsers.Related properties include: -webkit-box-orient, -webkit-box-pack, -webkit-box-align, etc.
These properties can be used in combination to achieve flexible layout effects. However, since the
-webkit-boxproperty is specific to WebKit browsers and not a standard CSS property, it may not work properly in modern browsers. To better support different browsers, it is recommended to use standarddisplay: flexordisplay: gridproperties to achieve similar layout effects.This AI answer is for reference only.
This answer can now explain why -webkit-box can also solve the issue of losing height: 100%. However, I still haven't found any official documentation or authoritative explanations about it. If you, the reader, know about it, please leave a comment. I would be very grateful. Thank you.