CSS Overflow problems with fixed position divs

Question

So this problem has come up and been solved probably 1000 times by now (Scroll part of content in fixed position container, child div height 100% inside position: fixed div + overflow auto) but I can't seem to get my CSS to behave.

I am trying to create a popup div that has a scroll-able interior. I have a dark grey div that should cover the entire window and centered in the window should be a greenish div. The inner div needs to have a margin and be sized to fit it's content, unless the content is too big and then it needs a scroll bar.

I can't get the scrolling to work. I've tried specifying max width/height but those seem to get ignored.

HTML:

<div class='PopupPanelBG'>
    <div class='PopupPanel'>
        <div>
            <div style='width: 1000px;'>some stuff that is really big</div>
        </div>
    </div>
</div

CSS:

.PopupPanelBG {
    display: table;
    background: rgba(0, 0, 0, 0.7);
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    overflow: hidden;
}

.PopupPanel {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.PopupPanel>div {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    opacity: 0.9;
    background-color: #e1efbb;
    border: 1px solid gray;
    padding: 8px;
    margin: 30px;
    overflow : auto;
}

http://jsfiddle.net/QbmdK/

Are you looking for something like this? Where the X can overflow, but the Y can't? http://jsfiddle.net/Agony/QbmdK/23/ — usernolongerregistered, Oct 28 '13 at 14:45
So setting max width/height to a fixed pixel value seems to work. Why can't I set it to a %? I.E. make the inner div no bigger than 95% of the screen? — mjr, Oct 28 '13 at 14:47
The value `%` is making the div as big as 100% of itself, not the screen. The screen is relative and the browser will make an overflow-x bar if it needs to. Making the div 100% of itself will just fit the div to the inner text, not the other way around. — usernolongerregistered, Oct 28 '13 at 14:49
[how's this?](http://jsfiddle.net/peteng/QbmdK/29/) You'll just have to play with the top and bottom values of `.PopupPanel` to get it to the size you want it — Pete, Oct 28 '13 at 14:53

usernolongerregistered · Answer 1 · 2013-10-28T15:26:11.263

5

So... This works (with percents).

http://jsfiddle.net/Agony/QbmdK/34/

(Now with vertical alignment!)

The thing you want to note is that the wrapping div has a set max-width:50% while the innerdiv has a max-width:100%. That will hold true for any amount of data.

edited Oct 28 '13 at 15:26

answered Oct 28 '13 at 14:58

usernolongerregistered

390
1
4
19

Not centered vertically, just like my initial answer. – aross Oct 28 '13 at 15:05
Wait... Why would you need vertical centering if the `overflow-x` and `white-space:nowrap` is there...? – usernolongerregistered Oct 28 '13 at 15:06
I don't see any nowrap in the question? – aross Oct 28 '13 at 15:08
I don't either, but I see it in the answer. At any rate, you can add `vertical-align:middle;` to the `#innerdiv` CSS to align the contents vertically too, though it changes nothing since there is `nowrap`. – usernolongerregistered Oct 28 '13 at 15:10
Not the content, but the bounding box had to be vertically centered – aross Oct 28 '13 at 15:15
Ohhhhhh. Okay, that makes more sense. Well, that's not too bad. Check my updated fiddle in my answer. – usernolongerregistered Oct 28 '13 at 15:26

aross · Accepted Answer · 2013-10-28T14:57:22.033

4

You're fiddling too much with the display property and you haven't defined a max-width. Something like this works:

.PopupPanelBG {
  display: table;
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  overflow: hidden;
}

.PopupPanel {
  display: table-cell;
  vertical-align: middle;
  /*text-align: center;*/
  position: relative;
}

.PopupPanel>div {
  /*display: inline-block;*/
  /*vertical-align: middle;*/
  text-align: center;
  opacity: 0.9;
  background-color: #e1efbb;
  border: 1px solid gray;
  padding: 8px;
  margin: 30px auto;
  overflow : auto;
  max-width: 50%;
}

edited Oct 28 '13 at 14:57

answered Oct 28 '13 at 14:50

aross

3,325
3
34
42

That fixes the scrolling. Thank you. It does remove my vertical centering though. Any ideas how to get that back? – mjr Oct 28 '13 at 14:55
1

Right, that wasn't clear from your question. You need that extra div to get that working. Edited answer, not perfect but gets close. – aross Oct 28 '13 at 14:57
The key take away from your answer is that the inline-block I was using is what was killing the scrolling. Thanks for pointing out that the display property is what was causing the problems. – mjr Oct 28 '13 at 19:18

CSS Overflow problems with fixed position divs

2 Answers2