CODEWITHSUNDEEP
cssangularflexbox
user5365075
user5365075

Reputation: 2289

Flexbox overflow scroll in angular component

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.

Upvotes: 0

Views: 7102

Answers (1)

Nehal
Nehal

Reputation: 13317

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!

Upvotes: 2

Related Questions