KB Blog
Navigation

Flexbox

Sticky panel

To have sticky panel such as in Redux documentation pages, leverage the position: sticky;

Considering the following HTML:

<div class="container">
  <div class="sticky"></div>
  <main class="main"></main>
</div>

Let’s have a simple sticky left panel with a standard main content:

.container {
  display: flex;
  flex-direction: row; /* dezdez */
  min-height: 100vh;
  width: 100%;
}
.sticky-panel {
  /* to maintain at specific position */
  width: 250px;
  top: 0px;
  /* override stretch */
  align-self: flex-start;
  /* a sticky panel should not go out of viewport */
  max-height: 100vh;
  overflow-y: scroll;
  /* overpowered property */
  position: sticky;
}
.main {
  flex: 1; /* to take the remaining width */
}

Sources:

Pinterest-like multi-column layout

behold the power of column-count

HTML:

<div class="container">
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
</div>

SCSS:

.container {
  column-count: 3;
  .item {
    width: 100%;
  }
}

Related attributes (w3c list):

  • column-gap: gutter size

Sources:

css flex sticky