CSS布局技巧：让子元素超出父容器宽度时自动换行

Got it, let's tackle this flex wrapping issue you're dealing with. The core problem here is that flex containers have flex-wrap: nowrap enabled by default—so instead of wrapping extra child elements onto a new line, they’ll just squeeze everything into one row, which is why your 33% width kids are getting squished. Here’s exactly how to fix it:

Step 1: Enable Wrapping on the Parent Container #

First, you need to explicitly set flex-wrap: wrap on your parent div. This tells the flex container to move child elements to a new line when the total width of children exceeds the parent's maximum width.

Step 2: Lock Child Element Widths (Prevent Compression) #

By default, flex children have flex-shrink: 1, which lets them shrink to fit the parent. To keep your 33% width intact, use the flex shorthand property to set flex: 0 0 33%—this means:

• flex-grow: 0: Don’t expand to fill extra space
• flex-shrink: 0: Don’t shrink when space is tight
• flex-basis: 33%: Maintain a base width of 33% of the parent

Also, add box-sizing: border-box to child elements to ensure any padding or borders you add later don’t push the width beyond 33%.

Full Working Code Example #

.parent-div {
  width: 300px;
  display: inline-flex; /* Keep this if you need the parent to behave like an inline element; use `display:flex` otherwise */
  flex-wrap: wrap; /* Critical for enabling auto-wrap */
  gap: 8px; /* Optional: Adds spacing between child elements for better readability */
  border: 1px solid #ddd; /* Optional: Visualize the parent container */
}

.child-div {
  flex: 0 0 33%; /* Lock width to 33%, no shrink/grow */
  box-sizing: border-box; /* Include padding/border in the 33% width */
  height: 60px; /* Optional: Give child elements height to see them clearly */
  background-color: #f5f5f5;
}

Why This Works #

With flex-wrap: wrap enabled, when you add that fourth child div (total width 132% of the parent), the flex container will automatically push the fourth element to a new line instead of compressing all children. The flex: 0 0 33% ensures each child stays at ~100px wide, exactly what you’re looking for.

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