Why is my Grid element’s height not being calculated correctly?

by

The height of the grid container is fixed at 100px.

The height of the grid item is set to 200%.

A grid item exists inside tracks, which exist inside the container.

You can think of grid items as existing two levels down from the container.

Put another way, the parent of the grid item is the track, not the container.

Since your row height is neither fixed or a true unit of length – it’s set to 1fr – the grid item’s percentage height fails and it is free to expand the row as necessary (height: auto).

Whatever fixed height you set on the container, set it on the row, as well.

.gridContainer {
  border: thin solid black;
  background: rgba(255, 0, 0, 0.5);
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 100px;    /* adjustment; value was 1fr */
  width: 100px;
  height: 100px;
  grid-template-areas: 'windowContentHolder';
}

.gridItem {
  grid-area: windowContentHolder;
  background: rgba(255, 255, 0, 0.5);
  width: 200%;
  height: 200%;
  overflow: auto;
}

.content {
  background: rgba(255, 0, 0, 0.5);
}
<div class="gridContainer">
  <div class="gridItem">
    <div class="content">hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>
    </div>
  </div>
</div>

More Related Contents:

  1. CSS-only masonry layout
  2. Centering in CSS Grid
  3. Last margin / padding collapsing in flexbox / grid layout
  4. Make grid container fill columns not rows
  5. CSS Grid Layout not working in IE11 even with prefixes
  6. Equal width flex items even after they wrap
  7. How to center elements on the last row in CSS Grid?
  8. Grid properties not working on elements inside grid container
  9. CSS grid square layout [duplicate]
  10. How to target a specific column or row in CSS Grid Layout?
  11. minmax() defaulting to max
  12. Why display grid with 100% in grid-template-columns goes out of body?
  13. CSS grid – maximum number of columns without media queries
  14. Make row stretch across all columns in CSS Grid
  15. Make flex items overlap
  16. CSS only solution to set MULTIPLE “same height” row sections on a responsive grid
  17. Understanding grid negative values
  18. grid-auto-flow in snake lines?
  19. Equal width columns in CSS Grid
  20. CSS grid wrapping
  21. How can I create a row-based masonry layout using CSS?
  22. How can I target a specific column or row in a CSS grid layout?
  23. How to make CSS Grid items take up remaining space?
  24. sticky position on css grid items
  25. How to flatten nested divs to display them in a CSS grid?
  26. How do browsers calculate width when child depends on parent, and parent’s depends on child’s
  27. What are the default values for justify-content & align content?
  28. How to make a fixed column in CSS using CSS Grid Layout?
  29. pseudo-element acting like a grid item in CSS grid
  30. CSS Grid Row Height Safari Bug

Leave a Comment