Top overflow is unscrollable

Question

I can't figure out why following snippet wont let me scroll all the way up. Inner container seems to exceed outer one, but this overflow is partially ignored. What is causing this?

body{
  margin: 0;
}

.outer {
  height: 100vh;
  display: flex;
  overflow-y: auto;
  justify-content: center;
  align-items: center;
}

.inner {
  display: flex;
  flex-direction: column;
}

.inner>div {
  height: 50px;
}

<div class="outer">
  <div class="inner">
    <div>heck 1</div>
    <div>heck 2</div>
    <div>heck 3</div>
    <div>heck 4</div>
    <div>heck 5</div>
    <div>heck 6</div>
    <div>heck 7</div>
    <div>heck 8</div>
    <div>heck 9</div>
    <div>heck 10</div>
  </div>
</div>

score 2 · Answer 1 · answered Sep 11 '17 at 13:55

Flex is killing you. Just remove that and align normally - flex messes with overflows.

body{
  margin: 0;
}

.outer {
  height: 100vh;
  overflow-y: auto;
  align-items: center;
  text-align:center;
}


.inner>div {
  height: 50px;
}

<div class="outer">
  <div class="inner">
    <div>heck 1</div>
    <div>heck 2</div>
    <div>heck 3</div>
    <div>heck 4</div>
    <div>heck 5</div>
    <div>heck 6</div>
    <div>heck 7</div>
    <div>heck 8</div>
    <div>heck 9</div>
    <div>heck 10</div>
  </div>
</div>

score 1 · Accepted Answer · answered Sep 12 '17 at 06:41

1

After more searching I found solution I was looking for here, turns out in flexbox auto margins also work vertically. Thanks everyone for help!

answered Sep 12 '17 at 06:41

K. Kowalczyk

967
13
34

score 0 · Answer 3 · answered Sep 11 '17 at 13:56

0

Try giving the inner container a height..

body{
  margin: 0;
}

.outer {
  height: 100vh;
  display: flex;
  overflow-y: auto;
  justify-content: center;
  align-items: center;
}

.inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.inner>div {
  height: 50px;
}

<div class="outer">
  <div class="inner">
    <div>heck 1</div>
    <div>heck 2</div>
    <div>heck 3</div>
    <div>heck 4</div>
    <div>heck 5</div>
    <div>heck 6</div>
    <div>heck 7</div>
    <div>heck 8</div>
    <div>heck 9</div>
    <div>heck 10</div>
  </div>
</div>

answered Sep 11 '17 at 13:56

sol

22,311
6
42
59

You're avoiding the overflow problem that way (didn't think about that, nice), though that may be a valid solution. You'll get my vote if OP decides this is what he prefers (I thought overflow is a must). – kabanus Sep 11 '17 at 13:58
I actually need the overflow, content would be too squished that way, so I'm afraid this approach is no go. – K. Kowalczyk Sep 11 '17 at 13:59

Top overflow is unscrollable

3 Answers3