CSS Flex: Vertically centered items that are taller than the viewport

Question

So i'm using CSS flex to create vertically centered Modal popups ( align-items: center; ). The issue is that when the Modal is taller than the viewport (and is scrollable), the Flex prioritizes the 'centered-ness' and thus makes the top of the modal inaccessible.

Has anyone found ways around this? I could use a media query to make all Modals flex-start aligned, however i still want smaller modals to be vertically centered.

I had thought of trying to make the modal flex-shrink; to always fit 100% of the viewport, but it needs to scroll (and allow content to fit in further down the page) so not sure!

.outer {
    display: flex;
    align-items: center;
}

Try this `.parent{position:relative;} .largerChild{position:relative;top:50%;translate:transform(0,-50%);}` — Adam K., Mar 02 '17 at 09:07
Why don't you just set a max height for your modal of 100% and have it overflow auto? — Pete, Mar 02 '17 at 09:18
Thank you @Pete - this has solved the issue! Still using flex, but the max height has done it — lucastobrazil, Mar 02 '17 at 09:27

lucastobrazil · Answer 1 · 2017-03-02T09:52:45.310

Thanks to @Pete for answering this:

The solution was setting max-height: 100%; and overflow: auto; (i had previously had overflow: visible; which caused issue.

I also found another method:

by placing the following flex properties on the 'outer outer' container (in this case, we're using ReactModal, so there's ReactModalPortal).

So we do ```.ReactModalPortal { display: flex; align-items: flex-start;

.innerContainer {
    display: flex;
    align-items: center;
}

} ``` i suppose by putting flex-start on the parent, it always ensures the content 'begins' at the top of the window.

score -2 · Answer 2 · answered Mar 02 '17 at 09:09

-2

Here you go

.parent{
top:50px;
}
.parent,
.child {
  position: relative;
  width: 50px;
  height: 50px;
  margin: auto;
  background: #CCC;
}

.child {
  position: relative;
  width: 25px;
  height: 100px;
  margin: auto;
  background: #000;
  top: 50%;
  transform: translate(0, -50%);
}

<div class="parent">
  <div class="child"></div>
</div>

answered Mar 02 '17 at 09:09

Adam K.

888
6
18

So basically, don't use flex? – lucastobrazil Mar 02 '17 at 09:10
I have done a lot of stuff in html/css and never really found the need to work with flex. It can be useful in some cases, but this just works and it's clean solid solution IMO. – Adam K. Mar 02 '17 at 09:11
Thanks for your help Adam! But curious - does this solve the problem of the 'centeredness' making the tall Modals inaccessible on small-height devices? I have tried applying these properties instead of flex and it's the same result... tall modals are indeed centered, but the top area is inaccessible – lucastobrazil Mar 02 '17 at 09:15
Without additional margin applied with conditinal styling, there probably is not a way around it and it kind of makes sense, that it behaves that way. – Adam K. Mar 02 '17 at 09:26

CSS Flex: Vertically centered items that are taller than the viewport

2 Answers2