-1

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?

agrm
  • 3,735
  • 4
  • 26
  • 36
Jota
  • 1
  • 2
  • What do you expect to happen if you have set small width and height (220 and 300) values to the container and the content does not fit in that space? The container simply cannot show that much content in that little space. It is not clear in your question what is it that you would like to happen. – Esko Nov 25 '22 at 11:45
  • The container has the "overflow-y:scroll" and so it scrolls without problems downwards. Unfortunately, the container hides the first 7 lines in the example. The number of hidden lines grow if the number of lines in the text grows. I would like to have my container (in between header and footer), scrolling upwards and downwards if possible. The idea is to adapt to smaller screens in such a way that one can start in the content container from the center. – Jota Nov 25 '22 at 11:54

2 Answers2

0

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>
agrm
  • 3,735
  • 4
  • 26
  • 36
0

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 class="scroll" style="background-color:coral;min-height:30px;">
    <div>RED</div>
  </div>
  <div class="scroll" style="background-color:lightblue;min-height:50px;">
    <div>BLUE</div>
  </div>
  <div class="scroll" 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>
George Chond
  • 977
  • 1
  • 3
  • 12