允许弹性项目保持固定宽度并在容器内水平滚动[重复]

我有一位家长正在使用display: flex;。目前它有四个子卡（卡），但可能有更多。所有的孩子都需要大但相等的宽度。 例如，每个孩子都需要一个40%宽度。如果发生这种情况，屏幕上只能容纳一定数量的孩子。我需要能够做到这一点，并让其余的孩子可以通过水平滚动来访问。

我该如何实现这一目标？我尝试使用flex-wrap: no-wrap;然后增加孩子的宽度，但父母不允许这样做。这似乎是故意的，但我基本上想覆盖这种行为。

HTML

 <div id="parent">
   <div class="children">
       <card-header>
           <b class="text"">Text</b>
       </card-header>
   </div>
 </div>

CSS

#parent {
  display: flex;
  flex-flow: row no-wrap;
  align-content: flex-start;
  justify-content: space-around;
  background-color: blue;
  height: 100%;
}

.children {
    width: 50%;
    height: 100%;
}

看起来您正在寻找 CSSoverflow财产。

尝试添加overflow-x: auto到容器。

并且让孩子的灵活性变差。

而不是这个：

width: 50%;

尝试这个：

flex: 0 0 50%; /* don't grow, don't shrink, stay fixed at 50% width */

初始值flex-shrink is 1，这意味着弹性项目将收缩以避免溢出容器。使用上面的代码我们覆盖默认值0，这基本上关闭了弯曲收缩。