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

Question

我有一个正在使用的父母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%;
}

Answer 1

看起来你正在搜索CSS overflow属性.

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

并使孩子不那么灵活.

而不是这个:

width: 50%;

试试这个:

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

初始值为flex-shrinkis 1,表示flex项将缩小以避免溢出容器.使用上面的代码,我们覆盖默认值0,这实际上会关闭flex shrink.