Flexbox overflow scroll in angular component

Question

I am trying to build a two column design with an Angular 2 app. I created a plunker to reproduce my problem: https://plnkr.co/3Evxm9?p=info

I want the scrollable area to be the red div (.overflow), not the .page. Without the .page { overflow: auto } the page won't scroll at all, though I would expect .overflow to do so since it has a defined height of 100%. The padding is there to offset from the .top div. I initially though using margin instead, but without the overflow: auto on .page, the margin goes outsides the bounds of .container (which shrinks to fit the height (padding included, margin excluded) of .overflow.

I seem to misunderstand the behaviour of the flexbox.

Nehal · Accepted Answer · 2017-07-15 16:02:21Z

2

I made some adjustment to your css to make the red area scrollable only.

css:

.page {
  width: 100%; height: 100vh;
  background: red;
  flex: 1;
  overflow: hidden;
}

.overflow {
  font-size: 30px;
  padding-top: 64px;
  height: 93vh;
  overflow: scroll;
}

Thanks for providing a plunker. It helped a lot to find a solution for you. Here's the link to the edited plunker.

Hope this helps!

answered Jul 15, 2017 at 16:02

Nehal

13.3k4 gold badges48 silver badges59 bronze badges

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

1 Comment

user5365075 Over a year ago

Thanks for the reply ! The problem I have with your solution, which indeed works well, is that the scrollbar does not show for the correct area. It should only go up until the bottom of the blue area. I need the red area to fill exactly the remaining space of the screen below the blue area. I only see two approaches so far: (1) margin-top with the height of the blue area, and height of 100%; (2) .page with display:flex, column direction, and .overflow with flex one, but then we need additional nodes inside .overflow to perform the scroll. I'll upvote you :)

Collectives™ on Stack Overflow

Flexbox overflow scroll in angular component

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related