1

I encountered a little problem while creating a modal in Angular. The container box has position: fixed, width: 100vw and height: 100vh in order to cover all the screen. The content has display: flex to align its own content vertically. But the two properties don't look like working properly if used together.

Here is a stackblitz snippet to reproduce the bug.

Troubles start when I resize the browser vertically and the content doesn't fit anymore in the viewport. The scrollbar appears as expected, but in place of starting from the top, it starts from the middle of the element, and I tried inspecting it for hours without understanding why it does happen.

How can I fix it keeping display: flex?

Here is some relevant code:

:host { /* modal container*/
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    align-items: center;
    justify-content: center;
}

.box-container { /* div used only to make the scrollbar appear */
    height: 100%;
    display: flex; /* comment this line to make it work */
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    overflow-x: hidden;
}

EDIT

I'm still looking for a solution, read the comment

Christian Vincenzo Traina
  • 9,546
  • 2
  • 40
  • 63
  • The linked question aimed the problem, but the proposed solution isn't applicable in my case. I want the modal vertically centred, and when resizing the browser vertically I want it always to stay centered until it doesn't fit the screen anymore, and in that case shows the scrollbar. The proposed solution, instead, just adds static padding. – Christian Vincenzo Traina Nov 12 '18 at 13:47
  • Please edit your question to make this clear, don't just leave it in the comments assuming that other users will read this far. – Graham Nov 12 '18 at 15:29

0 Answers0