'How do I make a grid item using the `aspect-ratio` property appear when the page's height is set to 100%?

I'm trying to create a grid with black boxes on the left and right side of the container, and a gray box in the center that contains different elements. The boxes on the left and right should have a width that's half of the container's height, and the middle item should stretch to fit it's content, but the entire container shouldn't be wider than the parent element. Here's what it should look like.

This is the HTML and CSS that I wrote:

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <style>
      body {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 100px;
      }

      #container {
        display: grid;
        max-width: 100%;
        grid-template-columns: min-content auto min-content;
        width: fit-content;
      }

      #middle {
        background-color: gray;
      }

      #left,
      #right {
        aspect-ratio: 1 / 2;
        background-color: black;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="left"></div>
      <div id="middle">
        <p>lorem ipsum</p>
      </div>
      <div id="right"></div>
    </div>
  </body>
</html>

The code works as expected until I set the height of html and body to 100% like so:

html,
body {
  height: 100%;
}

When I do this, the left item no longer appears on the page. Here's a screenshot of this. Oddly enough, if I set the margin of body to 0, then the left item appears properly.

I tried reordered the elements in #container so that #left and #right are the last elements in the container, and I used grid areas to force #left to appear on the left side.

/* Added CSS properties */

#container {
  grid-template-areas: 'left-side middle-side right-side';
}

#middle {
  grid-area: middle-side;
}

#left {
  grid-area: left-side;
}

#right {
  grid-area: right-side;
}

<!--Modified HTML-->
<div id="container">
  <div id="middle">
    <p>lorem ipsum</p>
  </div>
  <div id="left"></div>
  <div id="right"></div>
</div>

This made the left item appear, but it overlapped into the middle container, cropping out the beginning of the text. This is what the result looked like.

I know that the problem is rooted in the aspect-ratio property because, if I remove it, and set the width of #left and #right to a value such as 400px, #left appears properly.

Does anybody know how can I make the grid appear properly? Is there perhaps another way I can achieve the same effect as the aspect-ratio property?

cssresponsive-design


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions