Understanding Flexbox Layout Overflow

Creating a responsive two-column layout with CSS Flexbox is a common task, but developers frequently run into an frustrating issue: text or elements in the main content area overflowing horizontally, causing unwanted scrollbars. A common mistake when attempting to force a flex item to fill available space is setting min-width: 100%. However, this often causes the content to extend beyond the screen width.

Why min-width: 100% Causes Horizontal Scrolling

When you place two elements inside a display: flex container, the container's available space is distributed among its children based on their size and flex properties.

When you set min-width: 100% on a flex item alongside a fixed sidebar (e.g., 220px), you are telling the browser that the content item must be at least 100% of the parent container's total width. The browser calculates the required minimum width of the container as:

220px (Sidebar) + 100% (Content) = 100% + 220px

Because 100% plus 220px exceeds 100% of the parent's width, horizontal scrolling is created. Additionally, flex items default to min-width: auto, which prevents them from shrinking smaller than their largest non-breaking content unless explicitly overridden.

The Solution: Use flex: 1 and min-width: 0

To allow the content column to expand to fill the remaining space without exceeding the container, replace min-width: 100% with flex: 1 (or flex-grow: 1) and set min-width: 0.

Corrected CSS