弹性容器在换行时不会收缩

在CSS中，可以使用display: flex属性来创建一个弹性容器。默认情况下，弹性容器会在一行上显示所有的子元素，如果空间不足，子元素会被压缩或溢出容器。

要解决弹性容器在换行时不收缩的问题，可以使用flex-wrap: nowrap属性来禁止子元素换行。这样，子元素将会在一行上尽可能地排列，不会收缩。

以下是一个包含代码示例的解决方法：

HTML代码：

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
  <div class="flex-item">6</div>
</div>

CSS代码：

.flex-container {
  display: flex;
  flex-wrap: nowrap;
}

.flex-item {
  flex: 1;
  padding: 10px;
  border: 1px solid black;
}

在上述代码中，.flex-container是一个弹性容器，.flex-item是子元素。通过设置flex-wrap: nowrap属性，子元素将会在一行上排列，并且不会收缩。

你可以根据需要调整.flex-item的样式，例如设置flex: 1来使子元素等宽，设置padding和border来添加边距和边框。

这样，即使容器空间不足以容纳所有子元素，它们也不会收缩，而是溢出容器。