Flex sidebar

  • Updated:
  • Layout

Summary

Jump to section titled: Summary

A intrinsic flexbox technique taken from Every Layout that allows us to place two adjacent items side by side when there is the viewport space.

Use cases

Jump to section titled: Use cases

For adjacent items where one has a fix width and the other has a level of flexibility within the viewport.

  • Website sidebars where the main or articles section is flexible.
  • Search: the input field can shink but not the search button or icon.

Code

Jump to section titled: Code

HTML

Jump to section titled: HTML 
Copy 👋<div class="max-col-grid"> 

 <div> <img src="sofa.avif" alt=""></div>
 <div>Lorem ipsum dolor sit amet consectetur adipisicing elit.</div> 
 <div>Lorem ipsum dolor sit amet consectetur adipisicing elit.</div> 
 <div> <img src="sofa.avif" alt=""></div>
 <div>Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>

</div>/* end of grid */

CSS

Jump to section titled: CSS 
Copy 👋.with-sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s, 1.5rem);
  align-items: center;
   }

  .with-sidebar > :first-child {
   flex-basis: 15rem;
   flex-grow: 1;
  }

  .with-sidebar > :last-child {
   flex-basis: 0;
   flex-grow: 999;
   min-inline-size: 50%;  
   }

Example

Jump to section titled: Example
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia nam molestias reprehenderit reiciendis! Excepturi sit nobis aspernatur quia officia totam blanditiis, ipsum saepe dignissimos suscipit earum omnis, voluptates tempore nihil!