Search code examples
csscss-grid

CSS grid renders behind parent's scroll bar in Firefox and Safari

I have an absolutely positioned panel (fixed height, overflow scroll) and a grid with square tiles (10 columns). In Chrome, the grid renders correctly:

enter image description here

But in FF/Safari, the last column is displayed behind wrapper's scrollbar which is odd:

enter image description here

enter image description here

What I want is the same behavior in all browsers (like in Chrome). How do I get this?

jsFiddle

:root {
	--ck-character-grid-tile-size: 24px;
}

body * {
  box-sizing: border-box;
}

.wrapper {	
  height: 100px;
  overflow-y: auto;
  overflow-x: hidden;
  background: red;
  position: absolute;
  top: 50px;
  left: 50px;
  outline: 1px solid black;
}

.grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  background: blue;
}

button {
  background: yellow;
  width: var(--ck-character-grid-tile-size);
  height: var(--ck-character-grid-tile-size);
  min-width: var(--ck-character-grid-tile-size);
  min-height: var(--ck-character-grid-tile-size);
  border: 0;
  padding: 0;
  overflow: hidden;
  outline: 1px solid black;
}
<div class="wrapper">
  <div class="grid">
    <button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button>
  </div>  
</div>

Solution

  • According to CSS Tricks article, Preventing a Grid Blowout, the issue is connected with the sizing of the grid:

    The real fix isn't all that difficult — we only need to understand what is happening. I can't promise I'm explaining this 100% accurately, but the way I understand it, the minimum width of a grid column is auto. […]

    To apply our fix, we need to make sure that there is the column has a definite minimum width instead of auto.

    The fix proposed in article, minmax, seems to be working also for the case in question:

    grid-template-columns: repeat( 10, minmax( 0, var(--ck-character-grid-tile-size) ) );

    The simpler version, using fr unit, also seems to work:

    grid-template-columns: repeat( 10, minmax( 0, 1fr ) );

    Demo of the fix: https://jsfiddle.net/gp8r0f94/