@import "src/app/variables.scss";
.Screen {
  flex-grow: 1;
  display: flex;
  flex-flow: column nowrap;
  
  .main-homepage {
    flex-grow: 1;
    display: flex;
    flex-flow: column nowrap;
    background-color: $aleph-content-background;
    align-items: stretch;
  }

  .main {
    @extend .main;
    padding-bottom: ($aleph-grid-size*4 - 1);
  }
}
@import "src/app/variables.scss";
.Screen {
  flex-grow: 1;
  display: flex;
  flex-flow: column nowrap;
  
  .main-homepage {
    flex-grow: 1;
    display: flex;
    flex-flow: column nowrap;
    background-color: $aleph-content-background;
    align-items: stretch;
  }

  .main {
    @extend .main;
    padding-bottom: ($aleph-grid-size*4 - 1);
    flex-grow: 1;
    display: flex;
    flex-flow: column nowrap;
  }
}
Fix for content not growing to full height
Fix for content not growing to full height

With main now inside the screen component (which should probably be called Layout now, if we can be bothered to refactor it; though it’s not pressing) we need to make sure that it uses flex box and grows to full height so that content within it displays correctly.

    flex-grow: 1;
    display: flex;
    flex-flow: column nowrap;
