Html 具有弹性基础和最小和最大宽度的溢出

我的目标是使用flexbox实现一个滑块，该滑块具有给定的宽度，并且可以随着项目（图像）的添加而增长，直到达到特定的宽度。达到该宽度后，我想在x轴上显示一个滚动条。我还希望滑块不要收缩到最小宽度以下

这就是我所尝试的：

HTML:

弹出的问题是，一旦将overflow-x添加到滑块，它就不再增长，而是在达到flex basis width时显示滚动条

有趣的是，在滑块周围添加一个简单的换行div（.thisdivallowslidertogrowtomaxwidth）可以解决这个问题。你可以找到这个例子

---

有人能回答为什么会发生这种情况吗？我是否按预期使用flex属性？

要使flex容器根据flex项目的宽度增长，可以将

flex basis

设置为

content

content

将根据弹性项的内容自动调整大小

$（“.add slide”）。在（“单击”，函数（）上）{
$（“.slider”）.append（“”）；
});
.wrapper{
高度：300px；
边框：1px纯红；
显示器：flex；
证明内容：中心；
对齐项目：居中
}
.滑块{
显示器：flex；
边框：1px纯黑；
高度：100px；
弹性基础：内容；
最小宽度：200px；
最大宽度：350px；
溢出-x：自动；
溢出y：隐藏；
}
.形象{
弹性收缩：0；
边框：1px纯绿色；
高度：100px；
宽度：50px；
}
钮扣{
边缘底部：20px；
}

添加幻灯片
问题中应该有一个工作代码段，而不仅仅是外部链接资源。编辑了更多详细信息，希望问题尽可能简短。将display:flex添加到。thisdivallowslidertogrowtomaxwidth会使我们返回到原始问题，即当您有填充flex基本宽度的项目时，滚动条会立即显示。我的目标是仅在“最大宽度”已填充时显示滚动条。您的问题是“有人能回答为什么会发生这种情况，我是否按预期使用flex属性？”抱歉，我没有说得更清楚。我的目的是找到一个答案，为什么flexbox在没有非flex包装器div的情况下拒绝增长。不过，感谢您的回答。对于flexbox包装器，它遵守250px的
flex basis
——对于非flex包装器，
flex basis
不适用，由于
div
是块级元素，因此它延伸到了350px的
最大宽度
，更新了我的答案，并包括了添加幻灯片的示例
<div class="wrapper">
  <div class="thisDivAllowsSliderToGrowToMaxWidth">
    <div class="slider">
      <div class="image"></div>
      ...
    </div>
  </div>
</div>

.wrapper {
  height: 400px;
  display: flex;
  justify-content: center;
  align-items:center
}

.slider {
  display:flex;
  justify-content:flex-start;
  height:100px;
  flex-basis: 250px;
  min-width:200px;
  max-width:350px;
  overflow-x:auto;
}

.image {
  flex-shrink:0;
  height:100px;
  width:50px;
}