Flexbox Sidebar with Overflowing Grid Items #css #flexbox #grid

flexbox_sidebar_overflowing_grid_items.md

Flexbox Sidebar with Overflowing Grid Items

Most flexbox layouts work by using the intrinsic sizing.

This means the sizes of boxes are determined by the size of the contents.

This is usually a good thing because you want your layout to stretch to the content, but also to the available space.

This makes layouts "flexible".

However sometimes you know you have content that will be larger than the surrounding container, and you need to perform overflow.

This happens quite often with <pre><code>...</code></pre> content which can be quite large.

So here we want to have a standard "sidebar" layout with grid items that will automatically resize to available space, and when space is scarce, it will first wrap the content where it can, and finally add scroll bars.

Got some ideas from:

• https://every-layout.dev/layouts/sidebar/

---

To see the final layout: https://codepen.io/cmcdragonkai/pen/yLVXyZB

Notice the usage of 1em as the gutter size between the main and sidebar.

This is used in 3 places .wrapper > *, .wrapper > * > *, and .main.

The size of the side bar is to 300px initially. If there is available space it doesn't grow, but if there is less space it will squeeze down.

The side bar doesn't wrap because we don't use flex-wrap. But that is possible too.

index.css

.wrapper {
  overflow: none;
}

.wrapper > * {
  display: flex;
  margin: calc(1em / 2 * -1);
}

.wrapper > * > * {
  margin: calc(1em / 2);
}

.main {
  background: #ccc;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 10px;
  padding: 10px;
  flex-basis: 0;
  flex-grow: 999;
  min-width: calc(50% - 1em);
}

.side {
  background: #ccc;
  padding: 10px;
  flex-basis: 300px;
  flex-grow: 1;
}

.left {
  background: #aaa;
  white-space: pre-wrap;
  overflow-x: scroll;
}

.right {
  background: #aaa;
  white-space: pre-wrap;
  overflow-x: scroll;
}

p {
  margin: 0;
}

index.html

<div class="wrapper">
  <div>
    <div class="main">
      <pre class="left"><code>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</code></pre>
      <pre class="right"><code>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</code></pre>
    </div>
    <div class="side">
      <p>Hi this is some side bar</p>
    </div>
  </div>
</div>

Preview:

Note that by default all flex items have min-width: auto;, this prevents the flex item from shrinking significantly.

In some cases, if you have a flex item that has contents that you want to overflow, you need to set min-width: 0; to override this.