Centered flex items overflowing not readable

Question

I got a box with a headline and text inside. Because I don't know what text (and how many characters) will be in there later I set the overflow to auto.

h3,
p {
  margin: 0;
}

.wrapper {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  margin: 20px;
}

.text_overlay {
  top: 50%;
  width: 70%;
  margin: 0 15%;
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

<div class="wrapper">
  <div class="text_overlay">
    <h3>THIS IS A HEADLINE</h3>
    <p>This text is not overflowing.</p>
  </div>
</div>

<div class="wrapper">
  <div class="text_overlay">
    <h3>THIS IS A HEADLINE</h3>
    <p>This text is overflowing. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
      kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
      et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </div>
</div>

These are two examples: The first box is how the text should look like if the text fits the box (centered on both axis). The second box shows when the text overflows. Now you can't scroll far enough to the top to read the whole text.

justify-content: flex-start would fix it, but then the first box isn't centered anymore.

What can I do to fix this? I still want to use flex to center it because it makes a lot of other stuff for me easier.

Centered flex items overflowing not readable

0 Answers0