CSS - Grid Causing Overflow

Question

I'm trying to make a 2-column website using the CSS grid functionality. I'm also trying to make it mobile friendly.

What I have works, but it's causing an overflow on small devices:

<style>
#wrapper {
 display: grid;
 grid-template-columns: minmax(275px, 25%) 75%;
}
</style>

<div id="wrapper">
   <div>One</div>
   <div>Two</div>
</div>

I want the first column (the menu) to be limited to a minwidth of 275px, with a width of 25%, and the second column can take the full page (which I tried using 75%).

Somehow it isn't flexible to adjust itself to the window.

How can I make it so there isn't an overflow happening?

score 1 · Accepted Answer · answered Aug 04 '19 at 15:05

Use 1fr instead of 75%.

fr is a fractional unit and 1fr is for 1 part of the available space.

<style>
#wrapper {
  display: grid;
  grid-template-columns: minmax(275px, 25%) 1fr;
}
</style>

<div id="wrapper">
   <div>One</div>
   <div>Two</div>
</div>

CSS - Grid Causing Overflow

1 Answers1