溢出：滚动容器使子项收缩，而不是让子项根据需要扩展

Question

我有一个容器（ul元素），当它溢出时我希望它可以滚动。问题在于子级（li s）不会随内容（a s扩展而由于某些原因而缩小，而不是占用显示所有内容所需的所有空间。同一行。在第三个li上可以看到这一点，我在其中添加了更多内容，而不是将文本全部显示在同一行并展开li，它变得更加紧凑。

#container {
  width: 300px;
  height: 100px;
}
li {
  list-style: none;
  margin-right: 20px;
  display: flex;
}
li a {
  border: 1px solid black;
  border-radius: 50px;
  color: black;
  text-decoration: none;
  padding: 10px;
  margin: auto;
  width: auto;
}
ul {
  display: flex;
  width: 100%;
  overflow-x: scroll;
  padding: 0;
  margin: auto 0 auto 0;
  height: 100%;
}

<div id="container">
  <ul>
    <li>
      <a href="javascript:void(0);">Content</a>
    </li>
    <li>
      <a href="javascript:void(0);">Content</a>
    </li>
    <li>
      <a href="javascript:void(0);">Content Content Content</a>
    </li>
    <li>
      <a href="javascript:void(0);">Content</a>
    </li>
    <li>
      <a href="javascript:void(0);">Content</a>
    </li>
  </ul>
</div>

如何使它们与文本一起扩展并全部显示在一行上？

Answer 1

以[[rect_ID, [(x1,y1),(x2,y2),(x3,y3),(x4,y4)], [rect_ID, [(x1,y1),(x2,y2),(x3,y3),(x4,y4)], ... [rect_ID, [(x1,y1),(x2,y2),(x3,y3),(x4,y4)]] CSS样式添加属性white-space: nowrap;。