1

I have an Angular app with the containing element as flexbox, I want the 2 elements inside the only use the window without causing a scrollbar, this works as expected in Chrome but its not working in Edge browser or Firefox. How can I get the menu and main view to stack vertically and use the window height?

my-app {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

The 2 components:

app-menu {
  border-bottom: 2px solid black;
  width: 100%;
  height: 50px;
  background: lightcoral;
  box-sizing: border-box;
}

app-my-view {
  display: flex;
  flex: 1;
  width: 100%;
  background: lightgreen;
}

To see it work properly check the example in Chrome. In Edge and Firefox the app-my-view extends outside the my-app element and causes the scrollbar.

https://stackblitz.com/edit/2-column-scroll-v2?file=src/app/app.component.ts

kukkuz
  • 41,512
  • 6
  • 59
  • 95
matt
  • 311
  • 1
  • 4
  • 12
  • add `min-height: 0` to `app-my-view`? see https://stackblitz.com/edit/2-column-scroll-v2-q6onqc – kukkuz Jun 09 '19 at 04:36
  • @kukkuz I don't understand why that is making it work. Without min-height the elements extend outside container then adding min-height gets rid of the problem... Is it some kind of browser fix for firefox and edge? – matt Jun 09 '19 at 04:56
  • 1
    see https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size – kukkuz Jun 09 '19 at 05:19

0 Answers0