Cacher is the code snippet organizer for pro developers

<div class="layout">
  <div class="layout__wrapper">
    <div class="layout__appbar">
      appbar
    </div>
    <div class="layout__box">
      <div class="layout__sidebar">
        sidebar left
      </div>
      <div class="layout__main">
        <h3>Lorem ipsum dolor sit.</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, alias atque distinctio, est
          facere harum hic maiores molestias officia provident quaerat quod, sit sunt vel
          voluptates?
          Consequuntur, eligendi esse, explicabo labore magni minima nam odio, officiis omnis
          perspiciatis reiciendis vel! Ab accusantium commodi, consectetur debitis dolores dolorum
          eos
          et exercitationem hic illum ipsam libero maiores minus necessitatibus nesciunt pariatur
          perspiciatis placeat quam quas quos, repellat sed, sunt tenetur vel velit vitae voluptate.
          Dolorem excepturi necessitatibus rerum temporibus? Beatae deserunt dolore doloremque fuga
          harum, illo in incidunt inventore ipsum laboriosam laudantium libero magnam maiores maxime
          minima nobis obcaecati pariatur perferendis quibusdam quidem reiciendis sequi sint
          suscipit
          temporibus voluptas voluptate voluptatem voluptatibus! Alias aliquam at autem consectetur
          debitis deserunt dolorem doloribus dolorum eaque, eos esse et eveniet excepturi expedita
          explicabo fugiat fugit hic id ipsum iste libero, minus nemo neque nihil nulla porro quae
          qui
          quidem quis recusandae rem sint sit suscipit tempore ullam vel vero. Aperiam earum ipsam
          neque non omnis, vitae. Consectetur dignissimos incidunt non. Accusantium aperiam
          aspernatur
          deleniti dignissimos dolor eveniet ipsum omnis quibusdam quidem, reprehenderit sapiente
          voluptate voluptatem, voluptatum. Aspernatur, assumenda aut autem cupiditate dolore
          dolorem
          doloremque exercitationem expedita explicabo inventore ipsa molestias, mollitia,
          necessitatibus perferendis quas repellat?s</p>
      </div>
    </div>
    <div class="layout__footer">
      footer
    </div>
  </div>
</div>

body {
  overflow-y: scroll;
}

.layout {
  position: relative;
  &__wrapper {
    background: #FFFFFF;
    min-height: 100vh;
    display:    flex;
    flex-flow:  column nowrap;
    position:   relative;
    transition: transform .2s;
  }
  &__box {
    flex:    1 1 auto;
    display: flex;
  }
  &__appbar {
  }
  &__main {
    flex: 1 1 auto;
  }
  &__footer {
  }
  &__sidebar {
    flex: 0 0 320px;
  }
}