css子元素超过父元素宽度自动换行

在网页设计中，我们经常会使用 CSS 样式对页面进行优化。但是，在编写 CSS 样式时，有时会遇到一个问题：子元素的宽度超过父元素的宽度时，父元素不会自动换行，而是将子元素显示在父元素外面。如何解决这个问题呢？

.parent {
  width: 200px;       /* 父元素的宽度 */
  border: 1px solid #000;
}

.child {
  width: 250px;       /* 子元素的宽度 */
  height: 50px;
  background-color: #f00;
}

上面的代码用一个宽度为 200px，边框为 1px 的父元素包含了一个宽度为 250px，高度为 50px，背景色为红色的子元素。运行一下会发现，子元素超出了父元素的范围。这时候，我们可以使用 CSS 样式来解决这个问题。

.parent {
  width: 200px;       /* 父元素的宽度 */
  border: 1px solid #000;
  display: flex;      /* 设置弹性布局 */
  flex-wrap: wrap;    /* 子元素自动换行 */
}

.child {
  width: 250px;       /* 子元素的宽度 */
  height: 50px;
  background-color: #f00;
}

上面的代码中，我们给父元素设置了 display: flex; 属性，将其变为一个弹性布局容器。接着，我们再添加 flex-wrap: wrap; 属性，使子元素能够自动换行，如此一来，子元素就不会超出父元素的范围了。

通过上述方法，我们可以轻松地解决子元素超出父元素宽度不自动换行的问题。使用 CSS 样式优化页面时，我们应该灵活运用各种属性，让页面变得更加美观和实用。