HTML and CSS to vertically and horizontally center text with overflow scroll option-CodePudding

I am trying to center text in my content container. In my full versions, I have a wrapper, a header, a footer and a content containers and would like to center text horizontally and vertically inside the content container for some specific pages. Unfortunately when the number of lines exceeds the size of the content container, the top lines of the text just keep hidden (in some other cases they just overflow invading the header and footer container).

I have build a smaller example of my problem which reproduces the error and which is based on a W3 example. I have also tried several posts here but I am most probably doing something wrong.

I have tried everything that could come to mind knowing that I am not an expert on the matter. The problem only comes up when the text (lines) exceeds the size of the container. Some time I get an overflow visible effect and sometimes I loose the top lines.

All hints and help will be appreciated.

#main {
  width: 220px;
  height: 300px;
  border: 1px solid black; 
  display: flex;
  align-items: stretch;
}

#main div {
  flex: 1;
  border: 1px solid black;
  display: flex;
  overflow-y: scroll;
  align-items: center;
}

<h2>align-items: stretch</h2>

<div id="main">
    <div style="background-color:coral;min-height:30px;">RED</div>
    <div style="background-color:lightblue;min-height:50px;">BLUE</div>  
    <div style="background-color:lightgreen;min-height:190px;">
The number is: 1<br>
The number is: 2<br>
The number is: 3<br>
The number is: 4<br>
The number is: 5<br>
The number is: 6<br>
The number is: 7<br>
The number is: 8<br>
The number is: 9<br>
The number is: 10<br>
The number is: 11<br>
The number is: 12<br>
The number is: 13<br>
The number is: 14<br>
The number is: 15<br>
The number is: 16<br>
The number is: 17<br>
The number is: 18<br>
The number is: 19<br>
The number is: 20
    </div>
</div>

<p><b>Note:</b> Internet Explorer 10 and earlier versions do not support the align-items property.</p>

Where are the 1st 7 lines?

CodePudding user response：

One solution is to remove align-items: center from #main div and instead add margin:auto to its children. This will, however, only position elements - not text nodes.

#main {
  width: 220px;
  height: 300px;
  border: 1px solid black; 
  display: flex;
  align-items: stretch;
}

#main div {
  flex: 1;
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  /*align-items: center;*/
}

#main div > * {
  margin:auto 0;
  background:yellow;
}

<h2>align-items: stretch</h2>

<div id="main">
  <div style="background-color:coral;min-height:30px;">
    <b>RED</b>
  </div>
  <div style="background-color:lightblue;min-height:50px;">
    <b>BLUE</b>
  </div>  
  <div style="background-color:lightgreen;min-height:190px;">
    <b>The number is: 1</b>
    <b>The number is: 2</b>
    <b>The number is: 3</b>
    <b>The number is: 4</b>
    <b>The number is: 5</b>
    <b>The number is: 6</b>
    <b>The number is: 7</b>
    <b>The number is: 8</b>
    <b>The number is: 9</b>
    <b>The number is: 10</b>
    <b>The number is: 11</b>
    <b>The number is: 12</b>
    <b>The number is: 13</b>
    <b>The number is: 14</b>
    <b>The number is: 15</b>
    <b>The number is: 16</b>
    <b>The number is: 17</b>
    <b>The number is: 18</b>
    <b>The number is: 19</b>
    <b>The number is: 20</b>
  </div>
</div>

CodePudding user response：

That was a very interesting CSS thing...

You can't do what you want with this markup HTML. You need to wrap the column div inside a .scroll div and apply overflow on it. Then, you need to apply min-height: 100%; to your content div.

Also, check this thread with a similar problem.

#main {
  width: 220px;
  height: 300px;
  border: 1px solid black;
  display: flex;
  align-items: stretch;
}

.scroll {
  flex: 1;
  border: 1px solid black;
  overflow-y: scroll;
}

.scroll>div {
  display: flex;
  align-items: center;
  min-height: 100%;
}

<h2>align-items: stretch</h2>

<div id="main">
  <div  style="background-color:coral;min-height:30px;">
    <div>RED</div>
  </div>
  <div  style="background-color:lightblue;min-height:50px;">
    <div>BLUE</div>
  </div>
  <div  style="background-color:lightgreen;min-height:190px;">
    <div>
      The number is: 1<br> The number is: 2<br> The number is: 3<br> The number is: 4<br> The number is: 5<br> The number is: 6<br> The number is: 7<br> The number is: 8<br> The number is: 9<br> The number is: 10<br> The number is: 11<br> The number is:
      12
      <br> The number is: 13<br> The number is: 14<br> The number is: 15<br> The number is: 16<br> The number is: 17<br> The number is: 18<br> The number is: 19<br> The number is: 20
    </div>
  </div>

</div>

<p><b>Note:</b> Internet Explorer 10 and earlier versions do not support the align-items property.</p>

CodePudding user response：

#main {
    width: 100%;
    height: 300px;
    border: 1px solid black; 
    display: flex;
    text-align: center;
    justify-content: center;

}
#main>div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: auto;
    width: 33%;
}
.red{
    background-color:coral;
}
.blue{
    background-color:lightblue;
}
.lightgreen{
    background-color:lightgreen;
    justify-content: normal !important;
}

<!DOCTYPE html>
<html>
  <body>

    <h2>align-items: stretch</h2>

    <div id="main">
        <div >RED</div>
        <div >BLUE</div>  
        <div >
            The number is: 1<br>
            The number is: 2<br>
            The number is: 3<br>
            The number is: 4<br>
            The number is: 5<br>
            The number is: 6<br>
            The number is: 7<br>
            The number is: 8<br>
            The number is: 9<br>
            The number is: 10<br>
            The number is: 11<br>
            The number is: 12<br>
            The number is: 13<br>
            The number is: 14<br>
            The number is: 15<br>
            The number is: 16<br>
            The number is: 17<br>
            The number is: 18<br>
            The number is: 19<br>
            The number is: 20
        </div>
    </div>
  </body>
</html>