centered div does not overflow correctly

Question

I have a centered div(inner) in another div(outer). If the inner div is bigger than the outer div i want to have scrollbars to scroll to the top or bottom of the element. Sadly I can't scroll to the top completely. I think this is caused by the transform:translate trick.

.outer {
    overflow: scroll;
    width:100%;
    height:100%;
    position:relative;
}

.inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    
    
    background-color:red;
    overflow:hidden;
}

/* normalize */
body,html{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
}

<div class="outer">
  <div class="inner" style="width: 100px; height: 800px;">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
</div>

I used inline-style for the width and height of the inner div because im changing this with js dynamically.

This question was asked before here. But noone unterstood what hes trying to do.

Yes you cannot scroll the top because of the overflow behavioir — Temani Afif, May 14 '18 at 13:20
no if you remove it you still have the same problem: https://jsfiddle.net/9yzu7gyd/1/ — woodyplz, May 14 '18 at 13:22
check this https://stackoverflow.com/questions/49278725/centered-flex-container-grows-beyond-top/49279237#49279237 ;) I didn't meant the orverlow property, but how overflow in CSS works and nothing to do with translate — Temani Afif, May 14 '18 at 13:23
@woodyplz I'm trying to understand your question a little better.. So you want the inner div to be dynamically sized and the outer div to get scrollbars and scroll if the inner div is too tall (and too wide?) to fit. 1) When you say that your inner div is `centered` is it vertically/horizontally/both? 2) Why are you using `absolute` and then undoing the positioning with transform? — Chirag Ravindra, May 14 '18 at 13:39
@ChiragRavindra so what I meant with dynamically sized is that i use javascript to set the size, but it's actually sized like it is in the fiddle. I used position absolute for the transform/top/left. — woodyplz, May 14 '18 at 13:50

score 0 · Answer 1 · answered May 14 '18 at 13:47

Maybe you should try auto instead of hidden and change your code acording to this one:

.outer {
  overflow: scroll;
  width: 100%;
  height: 100%;
  position: relative;
}

.inner {
  background-color: red;
  overflow: auto;
}


/* normalize */

body,
html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

<div class="outer">
  <div class="inner" style="width: 100px; height: 800px;">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet.
  </div>
</div>

I basically deleted your position property to make the inner div inherit it from the outer div. Plus I deleted your transform property since you don´t necessarily need it.

I hope this will help!

`I basically deleted your position property to make the inner div inherit it from the outer div. Plus I deleted your transform property since you don´t necessarily need it.` --> you basically deleted everything thus we don't have no issue no centring, and only basic layout. ... and overflow:auto has no effect in this case — Temani Afif, May 14 '18 at 14:03

score -2 · Answer 2 · answered May 14 '18 at 13:40

.outer {
    overflow: scroll;
    width:100%;
    height:100%;
    position:relative;
}

.inner {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    background-color:red;
    overflow:hidden;
}

/* normalize */
body,html{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
}

<div class="outer">
  <div class="inner" style="width: 100px; height: 800px;">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
</div>

Please remove the transform css because it is sending the content -50% out of box and you can use

left: 0;
right: 0;
margin: auto;

to center the position:absoute content you don't need to use left:50%

centered div does not overflow correctly

2 Answers2