malept/gmusicprocurator

// This was incredibly helpful:
// https://stackoverflow.com/q/21515042

html {
  height: 100%;
}

body {
  @include display(flex);
  @include flex-direction(column);

  bottom: 0;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
}

header,
footer {
  background: $main-bg;
}

header {
  @include display(flex);
  @include flex-direction(row);
}

footer {
  bottom: 0;
  position: fixed;
  width: 100%;
}

h1,
#search {
  padding: 10px;
}

h1 {
  @include flex-grow(1);
}

#search {
  @include align-items(flex-end);
  @include flex-shrink;
}

main {
  @include display(flex);
  @include flex(1 6 90%);
  @include flex-flow(row);
  margin-bottom: $player-height;
  min-height: 0;

  > nav {
    @include flex(3 1 20%);

    max-width: 20%;
    overflow-y: auto;

    + * {
      @include flex(3 1 80%);

      max-width: 80%;
      overflow-x: hidden;
    }
  }
}

.scrollable-container {
  @include scrollable-flexbox-container;
}

.scrollable-contents {
  @include flexify;
  min-height: 0;
  overflow-y: auto;
  width: 100%;

  > div {
    @include display(flex);
    @include value-prefixer(min-height, min-content, webkit moz);
    width: 100%;
  }
}