This was a fun layout challenge for some dashboard UI we’ve been working on at Clerk. The structure of the layout contains your typical sidebar and content elements that live side by side.

Simplified markup example of what we are working with:

<div class="header"></div>
<div class="nav"></div>

<div class="layout">
  <div class="sidebar"></div>
  <div class="content">
    <div class="data"></div>
  </div>
</div>

The data element is a large table which i’ve hard coded to cause an overflow that needs to be able to scroll vertically and horizontally but we wanted to make sure that its scroll bars were always within the viewport.

To accomplish this we can make use of contain: size; to ensure the content overflows within its container and not cause the page to need to scroll.

body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.header {
  width: 100%;
  height: 56px;
}

.nav {
  width: 100%;
  height: 56px;
  position: sticky;
}

.layout {
  flex: 1;
  display: grid;
  grid-template-columns: 360px 1fr;
}

.sidebar {...}

.content {
  overflow: auto;
  contain: size;
}

/* This is simply to cause an overflow to demonstrate the table size */
.data {
  width: 200vw;
  height: 200vh;
}

View the demo CodePen here.