Search code examples
htmlcsscss-grid

css grid with scrolling

I created a container made from css grid, so I can align the item(s) both vertically or horizontally (depend on the configuration).

The grid item is only one child. I want the child on the center when the child is smaller than the container and if the child is bigger, the container has a scroller.

To doing so, I set the grid with align-items: center. It works on chrome but on firefox the child got clipped.
Then I did another approach, with align-content: center. It works on firefox but not on chrome. Then I applied both, it doesn't work either.

enter image description here

I want the grid works on both browsers (or any browser) without platform specific prefix -webkit- or -moz- or -whatever-.

Any idea?

See my code sanbox: https://codesandbox.io/s/html-css-forked-w4txx?file=/styles.css

:root {
  --conf-horz-align: center;
  --conf-vert-align: center;
}

.container {
  background: pink;
  border: inset 4px blue;

  height: 200px;

  display: grid;
  justify-content: var(--conf-horz-align);

  /* works on chrome but not on firefox */
  /* align-items: var(--conf-vert-align); */

  /* works on firefox but not on chrome */
  align-content: var(--conf-vert-align);

  overflow-y: auto;
}

.window {
  background: lightblue;
  border: inset 16px red;
  width: 400px;
}
.window.short {
  height: 120px;
}
.window.tall {
  height: 300px;
}
<!DOCTYPE html>
<html>
<head>
  <title>Another simple example</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <div class="container">
    <div class="window short">
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum, quod nesciunt laudantium minus commodi quia corrupti nihil quas dolor eos velit pariatur consequatur error excepturi dicta facilis dolorem numquam vero.</p>
    </div>
  </div>
  <hr>
  <div class="container">
      <div class="window tall">
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum, quod nesciunt laudantium minus commodi quia corrupti nihil quas dolor eos velit pariatur consequatur error excepturi dicta facilis dolorem numquam vero.</p>
      </div>
    </div>
</body>
</html>

Solution

  • Looks like something wrong is going on with codesandbox itself in your example. CSS file is doubling up and getting conflicted for me. I tried to copy your code outside and it works fine on Chrome, Firefox and Safari with line

    align-items: var(--conf-vert-align);

    Check this out: https://testing.accidentallydrawn.com/