如何在Flex列间设置间距并避免内容溢出

容器适配问题 #

1. Flex列间距设置避免溢出的方案 #

你的问题核心是固定flex-basis + 额外margin导致总宽度超出容器：当前每个列flex-basis设为50%，再加第二列的margin-left:0.5rem，总宽度变为100%+0.5rem，自然溢出。推荐三种可行方案：

方案一：使用Flex原生gap属性（最简洁） #

直接给.flex-row添加gap属性代替列的margin，Flex会自动计算剩余空间分配给列，完全不会溢出：

.flex-row {
  display: flex;
  background: rgba(255,0,0, 0.1);
  padding: 0.5rem 0;
  gap: 0.5rem; /* 直接设置列间距 */
}

.flex-col {
  flex-basis: 50%;
  flex-grow: 0;
  flex-shrink: 0;
  background: rgba(0,255,0, 0.1);
}
/* 移除原有margin-left规则 */
/* .flex-row .flex-col:last-child { margin-left: 0.5rem; } */

方案二：用calc()调整flex-basis #

如果要保留margin，需要把列的flex-basis减去一半边距（总边距0.5rem，两个列各承担一半缩减量）：

.flex-col {
  flex-basis: calc(50% - 0.25rem); /* 50%减去边距的一半 */
  flex-grow: 0;
  flex-shrink: 0;
  background: rgba(0,255,0, 0.1);
}

.flex-row .flex-col:last-child {
  margin-left: 0.5rem;
}

方案三：利用padding和flex-grow #

给.flex-row添加内部padding，让列自动填充剩余空间，无需固定flex-basis：

.flex-row {
  display: flex;
  background: rgba(255,0,0, 0.1);
  padding: 0.5rem 0.25rem; /* 左右各留0.25rem空间，对应列间距 */
}

.flex-col {
  flex: 1; /* 自动平分剩余空间 */
  background: rgba(0,255,0, 0.1);
}

2. 让

适配容器的解决方法 #

默认`white-space: pre`会保留文本换行和空格，且不会自动换行，导致长内容撑破容器——即便设置`max-width:100%`也无效，因为
的内在宽度由内容决定。核心修改如下：

```css
pre {
  border: 1px solid red;
  padding: 0.5rem;
  overflow-x: auto; /* 内容过长时显示横向滚动条 */
  max-width: 100%;
  width: 100%; /* 强制继承父容器宽度 */
  box-sizing: border-box; /* 让padding和border不额外增加宽度 */
  white-space: pre-wrap; /* 保留原换行，同时允许长文本自动换行 */
  /* 也可使用 white-space: pre-line; 会合并连续空格，保留换行符 */
}
```

### 关键细节：
- `width:100%`：强制
宽度等于父容器，避免内容撑开宽度
- `white-space: pre-wrap`：兼顾原文本格式和自动换行需求
- `overflow-x: auto`：极端长文本时显示滚动条，不破坏布局
- `box-sizing: border-box`：确保padding和border不会超出容器宽度

---

## 修改后的完整代码
### CSS代码
```css
*{
  box-sizing: border-box;
}

.container {
  background: #F5F5F5;
  border: 1px solid #CCC;
  margin: 0 auto;
  padding: 0.5rem;
  width: 500px;
}

.flex-row {
  display: flex;
  background: rgba(255,0,0, 0.1);
  padding: 0.5rem 0;
  gap: 0.5rem; /* 使用gap设置列间距 */
}

.flex-col {
  flex-basis: 50%;
  flex-grow: 0;
  flex-shrink: 0;
  background: rgba(0,255,0, 0.1);
}

pre {
  border: 1px solid red;
  padding: 0.5rem;
  overflow-x: auto;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  white-space: pre-wrap;
}
```

### HTML代码
```html

  
Some text in a container
  

    

      
Some text in a column. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus ea sint placeat deserunt, aut dolor et dolorum itaque, consequuntur minima quibusdam neque? Sequi eaque unde repudiandae, excepturi quibusdam maiores incidunt.
    
    

      
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
      Iste recusandae, repellendus ipsum accusantium rerum dolor fugiat, aperiam harum asperiores, vel debitis.
      Quidem modi sapiente enim. Ipsam saepe blanditiis ipsa id?
    
  




  
Some text in a container
  

    

      
Some text in a column. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus ea sint placeat deserunt, aut dolor et dolorum itaque, consequuntur minima quibusdam neque? Sequi eaque unde repudiandae, excepturi quibusdam maiores incidunt.
    
    

      
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Iste recusandae, repellendus ipsum accusantium rerum dolor fugiat,
aperiam harum asperiores, vel debitis.
Quidem modi sapiente enim. Ipsam saepe blanditiis ipsa id?
</div>

  
```
内容的提问来源于stack exchange，提问作者Chris Barr