display：flex第一个元素宽度固定，第二个宽出超出自动换行

`display: flex;` 是 CSS 中的一个属性，用于创建弹性盒子布局。当您将 `display: flex;` 应用于某个容器元素上时，该容器内的所有子元素都将按照弹性盒子布局规则排列。

若要在 flex 容器内让第一个元素宽度固定而允许第二个元素超出宽度并自动换行，则您可以采用以下方法：

### 示例代码

<div class="container">
  <div class="fixed-width">固定宽度内容</div>
  <div class="flexible-width">可变宽度的内容</div>
</div>

<style>
.container {
  display: flex;
}

.fixed-width {
  width: 200px; /* 设置第一个元素的具体宽度 */
}

.flexible-width {
  width: auto; /* 设置第二个元素的宽度为自动 */
}
</style>

在这段代码中：

1. **容器类** `.container` 使用了 `display: flex;` 属性，这意味着它的直接子元素将以弹性布局排列。
2. **固定宽度类** `.fixed-width` 指定了具体的宽度（这里设置为200px），所以这个元素会被强制保持这个宽度。
3. **可变宽度类** `.flexible-width` 将其宽度设置为 `auto`，意味着浏览器会根据其内部内容自动调整宽度，并可能导致换行。

### 相关问题:

1. 当我需要将某些元素设为固定宽度并且希望其他元素能够溢出并自动换行时，如何使用 flexbox 实现这一效果？
2. 我可以使用 flex 容器的哪些属性来控制子元素的自动换行行为？
3. 如果我在 flex 容器中添加了一个新的子元素，它超过了可用空间怎么办？