Centered element's content is getting chopped on overflow

Question

I have an element that I need to center on the page on both axis. I'm trying to use the flexbox for this, however, when the element's container overflows (e.g. the browser window is too small to fit the entire element), the element's content is getting truncated from left and top without the ability to scroll and see the entire content:

body {
  margin: 30px;
}

.resizer {
  
  border: 1px dashed black;
  resize: both;
  
  width: 400px;
  height: 400px;
  overflow: auto;
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  background-color: #888;
  
}

.centered {
  flex: 0 0 300px;
  background-color: lime;
}

<div class="resizer">
  <div class="centered">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in imperdiet justo, a porttitor lectus. Suspendisse vel tempor arcu, a pretium lectus. Ut et magna vitae purus porta egestas at ut elit. Nulla faucibus nibh sed purus pulvinar, in dictum est vestibulum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec varius placerat dolor, non commodo purus malesuada eget. Fusce congue non erat ullamcorper ultricies. Fusce sed tellus lectus. Aenean quis maximus augue, eu placerat urna.
  </div>
</div>

It looks like the browser is calculating overflow only in a single direction (bottom-right).

Is it possible to make the entire content accessible on overflow without using media queries?

This is not the case on my Safari on Mac, so I'm willing to bet it is to do with the scrollbars taking up some space "but not really". — somethinghere, Apr 30 '23 at 14:50
@somethinghere the amount of chopped content is much greater than the size of the scrollbar so I don't think that this theory is correct. It looks more like the behavior of the flexbox centering. — Slava Fomin II, Apr 30 '23 at 14:55

score -1 · Answer 1 · answered Apr 30 '23 at 14:50

It looks like CSS Grid is better suited for such layouting purposes.

Just set the following properties for the parent container:

.container {
  display: grid;
  align-items: center;
  justify-items: center;
}

And it should work correctly:

body {
  margin: 30px;
}

.resizer {
  
  border: 1px dashed black;
  resize: both;
  
  width: 400px;
  height: 400px;
  overflow: auto;
  
  display: grid;
  align-items: center;
  justify-items: center;
  
  background-color: #888;
  
}

.centered {
  width: 300px;
  background-color: lime;
}

<div class="resizer">
  <div class="centered">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in imperdiet justo, a porttitor lectus. Suspendisse vel tempor arcu, a pretium lectus. Ut et magna vitae purus porta egestas at ut elit. Nulla faucibus nibh sed purus pulvinar, in dictum est vestibulum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec varius placerat dolor, non commodo purus malesuada eget. Fusce congue non erat ullamcorper ultricies. Fusce sed tellus lectus. Aenean quis maximus augue, eu placerat urna.
  </div>
</div>

Centered element's content is getting chopped on overflow

1 Answers1