html - 使用 flex-basis 和 min 和 max-width 溢出

Question

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

这是我尝试过的:

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 添加到 slider ，它就不再增长，而是在达到 flex-basis 宽度时立即显示滚动条。

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

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

Answer 1

要使 flex 容器根据 flex 元素的宽度增长，您可以将 flex-basis 设置为 content

content 将根据 flex 元素的内容自动调整大小

$(".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>