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? jsfiddle.net/Agony/QbmdK/23 — usernolongerregistered
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
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
how's this? You'll just have to play with the top and bottom values of .PopupPanel to get it to the size you want it — Pete

aross aross · Accepted Answer · 2013-10-28T14:50:34

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%;
}

CSS Overflow problems with fixed position divs

2 Answers