具有 flex-basis 和 min 和 max-width 的溢出

Question

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

这是我尝试过的：

HTML：

<div class="wrapper">
  <div class="thisDivAllowsSliderToGrowToMaxWidth">
    <div class="slider">
      <div class="image"></div>
      ...
    </div>
  </div>
</div>

CSS：

.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;
}

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

有趣的是，在滑块周围添加一个简单的包装 div (.thisDivAllowsSliderToGrowToMaxWidth) 以某种方式解决了这个问题。您可以找到示例here。

谁能回答为什么会这样？我是否按预期使用了 flex 属性？

Answer 1

要使弹性容器根据弹性项目的宽度增长，您可以将flex-basis 设置为content

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

$(".add-slide").on("click",function(){

$(".slider").append('<div class="image"></div>');

});

    .wrapper {
      height: 300px;
      border :1px solid red;
      display: flex;
      justify-content: center;
      align-items:center
    }

    .slider {
      display:flex;
      border: 1px solid black;
      height:100px;
      flex-basis: content;
      min-width:200px;
      max-width:350px;
      overflow-x:auto;
      overflow-y:hidden;
    }

    .image {
      flex-shrink: 0;
      border: 1px solid green;
      height:100px;
      width:50px;
    }

    button {
      margin-bottom: 20px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
<button class="add-slide">add slide</button>

<div class="wrapper">
    <div class="slider">
        <div class="image"></div>
    </div>
</div>