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
– usernolongerregistered, Commented Oct 28, 2013 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
– mjr, Commented Oct 28, 2013 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
– usernolongerregistered, Commented Oct 28, 2013 at 14:49
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
– Pete, Commented Oct 28, 2013 at 14:53

aross · Accepted Answer · 2013-10-28 14:57:22Z

6

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, 2013 at 14:57

answered Oct 28, 2013 at 14:50

aross

3,6663 gold badges37 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

mjr Over a year ago

That fixes the scrolling. Thank you. It does remove my vertical centering though. Any ideas how to get that back?

aross Over a year ago

Right, that wasn't clear from your question. You need that extra div to get that working. Edited answer, not perfect but gets close.

mjr Over a year ago

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.

usernolongerregistered · Accepted Answer · 2013-10-28 15:26:11Z

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, 2013 at 15:26

answered Oct 28, 2013 at 14:58

usernolongerregistered

3901 gold badge4 silver badges19 bronze badges

6 Comments

aross Over a year ago

Not centered vertically, just like my initial answer.

usernolongerregistered Over a year ago

Wait... Why would you need vertical centering if the overflow-x and white-space:nowrap is there...?

aross Over a year ago

I don't see any nowrap in the question?

usernolongerregistered Over a year ago

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.

aross Over a year ago

Not the content, but the bounding box had to be vertically centered

|

Collectives™ on Stack Overflow

CSS Overflow problems with fixed position divs

2 Answers 2

3 Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related