4

I want to create an area that the user scrolls, inside the area the content (the list) is vertically aligned.

I hope to achieve the alignment with flex:

display: flex;
align-items: center;

The issue is that with align-items: center; the list is cut off and gets hidden in the overflow section. I've commented out align items in the fiddle so you can see the issue. Toggle it on and off and you'll see the list is cut off and hidden.

  1. Why is this?
  2. What is the fix?

JSFIDDLE

SNIPPET

div {
  position: fixed;
  overflow-y: scroll;
  background: grey;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  /*align-items: center;*/
}

li {
  margin: 25em 0;
}
<div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</div>
dippas
  • 58,591
  • 15
  • 114
  • 126
panthro
  • 22,779
  • 66
  • 183
  • 324
  • which is the expected behavior ? if the list overflows the container why you need a vertical alignment ? http://stackoverflow.com/questions/24538100/issue-when-centering-vertically-with-flexbox-when-heights-are-unknown – DaniP Mar 15 '17 at 15:08

0 Answers0