Why Doesn\'t My CSS Grid Item Height Percentage Work as Expected?

Height Calculation Issue in CSS Grid Element

In CSS, the height property of a grid element can sometimes behave unexpectedly. This can be caused by the percentage-based height being computed relative to an unexpected parent element.

Case Study

Consider a CSS grid element with the following dimensions:

• Grid container: height: 100px;
• Grid item: height: 200%;

Expectedly, the grid item should be twice the height of the container, with any excess being hidden by a scrollbar. However, the actual result shows the grid item overflowing with no scrollbar.

Understanding the Cause

Upon closer inspection, it becomes clear that the percentage height is being calculated based on the child element of the grid item, not the grid item's parent container. This is because grid items exist two levels down from the container, with the intermediate level being the tracks.

Resolution

To resolve this issue, the height of both the container and the row within the container should be set to a fixed value. In this case, both the container and the row are set to 100px:

.gridContainer {
  height: 100px;
}

.gridContainer {
  grid-template-rows: 100px;
}

By defining the height of both the container and the row, the grid item's percentage height can be calculated correctly relative to the intended parent. This allows the grid item to have a height of 200% of the row height, ensuring that it fits within the container with any overflow hidden by the scrollbar.

The above is the detailed content of Why Doesn\'t My CSS Grid Item Height Percentage Work as Expected?. For more information, please follow other related articles on the PHP Chinese website!