如何防止div内的内容自动撑大div，使其始终保持100%的宽度即使内容超出？

为了防止`<div>`内的内容自动撑大`div`并保持其宽度为100%，即使内容超出容器，你可以采用以下几种CSS技巧：

1. **设置`max-width`**：
给包含元素的`div`添加 `max-width: 100%;` 属性，这样它不会超过父容器的宽度，而超出的内容将溢出隐藏或修剪。

.parent-div {
  width: 100%;
  overflow: hidden; /* 或者使用 "overflow-wrap: break-word;" 来换行 */
}

.child-div {
  max-width: 100%;
}

2. **使用`display: inline-block`**：
如果内容是文本，可以尝试将其`display`属性设置为`inline-block`，这样它会像内联元素一样水平排列，而不是作为块级元素自动填充宽度。

.child-div {
  display: inline-block;
  white-space: nowrap; /* 防止换行 */
}

3. **绝对定位和限制宽度**：
使用绝对定位(`position: absolute;`)将元素从文档流中移除，并限制宽度(`width: 100%;` 或其他自适应值)。

.parent-div {
  position: relative;
}

.child-div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

请注意，上述方法可能会导致文本折行溢出或内容无法滚动，具体选择哪种取决于实际需求。如果需要滚动功能，可以考虑使用 `overflow-x: auto;` 和 `white-space: normal`。