我有一个包含一些flex项的flex容器。我希望项目在默认情况下展开，以包含它们的所有内容，而不会水平溢出flex容器。从所附的图像中可以看到，“Content7”溢出。

flex-container当前的外观:

HTML:

<div class="flexContainer">
  <div class="flexItem">Content 4</div>
  <div class="flexItem">Content 5</div>
  <div class="flexItem">Content 6</div>
  <div class="flexItem">Content 7 - Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore vero deleniti veritatis iste at odit, quae placeat. Voluptas, dolorem dolore.</div>
  <div class="flexItem">Content 8</div>
</div>

CSS:

<div class="flexContainer">
  <div class="flexItem">Content 4</div>
  <div class="flexItem">Content 5</div>
  <div class="flexItem">Content 6</div>
  <div class="flexItem">Content 7 - Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore vero deleniti veritatis iste at odit, quae placeat. Voluptas, dolorem dolore.</div>
  <div class="flexItem">Content 8</div>
</div>

顺晟科技：

换到就能完成这项工作。现在的高度将扩大，直到所有东西都适合里面。

更改为以下代码:

<div class="flexContainer">
  <div class="flexItem">Content 4</div>
  <div class="flexItem">Content 5</div>
  <div class="flexItem">Content 6</div>
  <div class="flexItem">Content 7 - Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore vero deleniti veritatis iste at odit, quae placeat. Voluptas, dolorem dolore.</div>
  <div class="flexItem">Content 8</div>
</div>