Can't see all content of div with overflow: auto;

HTML-CSS
1

I have two div s with textual content which is inside the container. When the screen getting smaller I want to add a scrollbar to div. Everything works almost fine but when a scrollbar appears I can’t see the part of the text that is at the top. it is as if hidden. How can I fix this to scroll through the entire text in div .

codepen link

HTML:

<div class="container">
  <div class="text-block text-block-one">
    <div class="text-wrapper">
      <h1>TEXT</h1>
      <h3>TEXT</h3>
    </div>
  </div>
</div>

CSS:

.container {
  position: relative;
  width: 100%;
  display: flex;
}

.text-block {
  display: flex;
  align-items: center;
  flex: 1 0 37.645448%;
  overflow: auto;
  position: relative;
}

.text-wrapper {
  margin: 0 10%;
  position: absolute;
  content: '';
  text-align: center;
}
2

Can you specify the name of the div?

3 
.text-wrapper {
      margin: 10px;
      position: absolute;
      content:'';
      text-align:center;
    }
4

yes, in “.text-wrapper” when i change size of screen i get a scrollbar but it doesn’t scroll through all the text content

5
6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.