Flex sidebar

Updated: 07 March 2023
Layout

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

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

HTML

<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

.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