# Complex conditional width using flex-basis with clamp

DevFeed: [Complex conditional width using flex-basis with clamp](<https://devfeed.tech/articles/complex-conditional-width-using-flex-basis-with-clamp-31227.md>)

Original publisher: [Read original article](<https://every-layout.dev/blog/sidebar-flex-basis-clamp/>)

Author: Heydon Pickering

Published: 2022-08-25T00:00:00Z

Content type: tutorial

Language: en

Sources: [The Every Layout Blog](<https://devfeed.tech/sources/the-every-layout-blog.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [code](<https://devfeed.tech/tags/code.md>), [css](<https://devfeed.tech/tags/css.md>), [details](<https://devfeed.tech/tags/details.md>)

## AI overview

This tutorial explains how to create a responsive Sidebar layout with CSS flex-basis, min-inline-size, min(), and clamp(). It describes how the relationship between the sidebar and non-sidebar widths determines when the layout switches from two columns to a stacked arrangement, while preventing overflow on small screens.

## Source excerpt

The primitive Sidebar layout is a kind of quantum layout whereby the sidebar only exists as a sidebar where there is available space. As the Sidebar document details, wrapping from a two-column to a one-column layout depends on the relationship between two things: A minimum percentage width for the non-sidebar element A preferred width for the sidebar element The breakpoint--if you want to call it that--is where (1) equals (2). When (1) becomes less than (2), the sidebar and non-sidebar stack vertically. The sidebar is no longer a sidebar. (2) is either a set flex-basis value or defaults to the (maximum) width of the sidebar's content (implicitly auto). Importantly, if the set value was a percentage, like (1), the breakpoint would never be breached and wrapping would not occur. Why? Because the sidebar would maintain its %-based share of the component in spaces of any size. A flex-basis value of, say, 20ch differs because it's a kind of quasi-fixed value. It will be exactly 20ch unless 20ch is either too small or too large. .sidebar { flex-basis: 20ch; /* ↓ when not a sidebar, let it use up all the space */ flex-grow: 1; } But what if you wanted the sidebar to be 33.333% wide where possible? You can make flex-basis 33.333% then add a min-inline-size: .sidebar { flex-basis: 33.333%; min-inline-size: min(20ch, 100%); /* ↓ when not a sidebar, let it use up all the space */ flex-grow: 1; } The important part is using the target min-inline-size inside the min() function with 100%--a technique borrowed from the Grid layout. Since 100% is really the maximum value for the context, we are effectively toggling min-inline-size on and off, conditionally. Which is the kind of thing people don't think CSS can do. The slightly mind bending thing here is that the "minimum" value of `20ch` once hit immediately becomes greater than the larger value of `33.333%` that it replaces This toggle ensures 20ch is only applied where that value is less than 100%. In other words, it stops stuff ov