如何使用CSS让横向溢出的Div自动换行显示

要让.div2里的子元素在溢出时自动换行，只需要给**flex容器.div2**添加flex-wrap: wrap属性即可。Flex布局默认的flex-wrap值是nowrap，这会强制所有子元素在一行排列，哪怕超出容器宽度；设置为wrap后，当容器宽度不足以容纳所有子元素时，元素会自动换行到下一行。

修改后的CSS代码 #

.div1 {
  height: auto;
  min-height: 125px;
  width: 66%;
  border: 2px solid #ccc
}

.div2 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; /* 新增属性，开启自动换行 */
}

.grid-container-element {
  grid-template-columns: auto 1fr;
  grid-gap: 0px;
  border: 1px solid black;
  min-width: 97.5px;
  height: 32px;
  margin-left: 12px;
  display: flex;
  flex-direction: row;
  margin-top: 8px; /* 可选：添加垂直间距，优化换行后视觉效果 */
}

.grid-child-element-1 {
  margin: 3px 1px 1px 1px;
  border: 1px solid red;
  height: 24px;
  font-size: 7px;
  width: 23.4px;
}

.grid-child-element-2 {
  margin: 3px 1px 1px 1px;
  border: 1px solid red;
  height: 24px;
  font-size: 7px;
  min-width: 64.35px;
}

.grid-child-element-3 {
  margin: 3px 1px 1px 1px;
  border: 1px solid red;
  height: 24px;
  font-size: 7px;
  width: 23.4px;
}

.text {
  font-size: 7px;
  margin: 0px;
  word-wrap: break-word;
  min-width: 23.4px;
}

.num {
  font-size: 7px;
  margin-top: 7px;
}

对应的HTML结构 #

<div class="div1">
  <div class="div2">
    <div class="grid-container-element">
      <div class="grid-child-element-1">Div 1</div>
      <div class="grid-child-element-2">
        <div class="text">Div 2Div </div>
        <div class="num">1234</div>
      </div>
      <div class="grid-child-element-3">
        <p>text</p>
      </div>
    </div>
    <div class="grid-container-element">
      <div class="grid-child-element-1">Div 1</div>
      <div class="grid-child-element-2">
        <div class="text">Div 2Div </div>
        <div class="num">1234</div>
      </div>
      <div class="grid-child-element-3">
        <p>text</p>
      </div>
    </div>

    <div class="grid-container-element">
      <div class="grid-child-element-1">Div 1</div>
      <div class="grid-child-element-2">
        <div class="text">Div 2Div 2Div 2 </div>
        <div class="num">1234</div>
      </div>
      <div class="grid-child-element-3">
        <p>text</p>
      </div>
      <div class="grid-container-element">
        <div class="grid-child-element-1">Div 1</div>
        <div class="grid-child-element-2">
          <div class="text">Div 2Div 2Div v 2</div>
          <div class="num">1234</div>
        </div>
        <div class="grid-child-element-3">
          <p>text</p>
        </div>
      </div>
      <div class="grid-container-element">
        <div class="grid-child-element-1">Div 1</div>
        <div class="grid-child-element-2">
          <div class="text">Div 2Div 2Di 2Div 2</div>
          <div class="num">1234</div>
        </div>
        <div class="grid-child-element-3">
          <p>text</p>
        </div>
      </div>
      <div class="grid-container-element">
        <div class="grid-child-element-1">Div 1</div>
        <div class="grid-child-element-2">
          <div class="text">Div 2 2Div 2</div>
          <div class="num">1234</div>
        </div>
        <div class="grid-child-element-3">
          <p>text</p>
        </div>
      </div>
      <div class="grid-container-element">
        <div class="grid-child-element-1">Div 1</div>
        <div class="grid-child-element-2">
          <div class="text">Div 2Di Div 2</div>
          <div class="num">1234</div>
        </div>
        <div class="grid-child-element-3">
          <p>text</p>
        </div>
      </div>
    </div>
  </div>
</div>

额外说明 #

• flex-wrap: wrap会让flex容器的子元素在容器宽度不足时自动换行，换行后的元素会占据新的一行。
• .grid-container-element设置的min-width: 97.5px会确保子元素不会被过度挤压，当容器宽度小于这个值时才会触发换行逻辑。

内容的提问来源于stack exchange，提问作者Pakal Nilavu