Handling Overflow in Flexbox: Preventing Fixed-Width Elements from Being Crushed

In front‑end development we often encounter a layout where a container holds two elements: element A with a fixed width and element B that should adapt to the remaining space.

We can quickly write CSS for this:

<div class="card-content-wrap">
    <div class="left">左边元素固定宽度308px------------------</div>
    <div class="right">
        右边元素flex:1
    </div>
</div>
<style lang="less" scoped>
.card-content-wrap {
    width: 1000px;
    border: 1px solid blue;
    display: flex;
    justify-content: space-between;
    .left {
        width: 308px;
        margin-right: 16px;
    }
    .right {
        flex: 1;
    }
}
</style>

The flex: 1 property makes the right element occupy the remaining space.

Problem Description

When the adaptive element contains a child whose width exceeds the parent, the fixed‑width element gets squeezed.

“Child element too wide, causing left fixed element to be compressed:”

<div class="card-content-wrap">
    <div class="left">左边元素固定宽度308px------------------</div>
    <div class="right">
        右边元素flex:1
      <div style="width: 920px; border: 1px #ff2d2d solid">子元素较大，导致左侧固定元素被挤压</div>
    </div>
</div>

“Child element extremely wide, left element squeezed and right element overflows the safe area:”

<div class="card-content-wrap">
    <div class="left">左边元素固定宽度308px------------------</div>
    <div class="right">
        右边元素flex:1
      <div style="width: 1220px; border: 1px #ff2d2d solid">子元素宽度过大,导致父元素被挤出屏幕</div>
    </div>
</div>

How can we elegantly solve this?

Solution

Use overflow: hidden

Setting overflow: hidden on the flex:1 element’s parent resolves the issue, though it is unsuitable when a scrollbar is needed.

.card-content-wrap {
    width: 1000px;
    border: 1px solid blue;
    display: flex;
    justify-content: space-between;
    .left {
        width: 308px;
        margin-right: 16px;
    }
    .right {
        flex: 1;
        overflow: hidden;
    }
}

Use width:0

This is the best solution.

.card-content-wrap {
    width: 1000px;
    border: 1px solid blue;
    display: flex;
    justify-content: space-between;
    .left {
        width: 308px;
        margin-right: 16px;
    }
    .right {
        flex: 1;
        width: 0;
    }
}

It also works when the parent needs a scrollbar.

.right {
    flex: 1;
    width: 0;
    overflow: auto;
}

Use min-width:0

The effect of min-width:0 is identical to width:0.

.right {
    flex: 1;
    min-width: 0;
    overflow: auto;
}

Vertical direction layout

The same issue appears in vertical flex layouts.

Solutions are analogous: set overflow: hidden, or height: 0, or min-height: 0 on the flex item.

.bottom{
  flex: 1;
  overflow: hidden;
}

.bottom{
  flex: 1;
  height: 0;
}

.bottom{
  flex: 1;
  min-height: 0;
}

Root Cause

The flex: 1 shorthand combines flex-grow, flex-shrink and flex-basis. By default browsers set min-width:auto and min-height:auto on flex items, preventing them from shrinking smaller than their content. Overriding with min-width:0 (or width:0) allows the flex item to shrink correctly.