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

【问题标题】：Allow flex items to keep fixed width and scroll horizontally inside container [duplicate]允许弹性项目保持固定宽度并在容器内水平滚动[重复]
【发布时间】：2016-05-24 03:49:01
【问题描述】：

我有一个使用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%;
}

【问题讨论】：

标签： html css flexbox

【解决方案1】：

您似乎正在搜索 CSS overflow 属性。

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

并让孩子们不那么灵活。

而不是这个：

width: 50%;

试试这个：

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

flex-shrink的初始值为1，这意味着flex item会收缩以避免溢出容器。在上面的代码中，我们用0 覆盖了默认值，这实际上关闭了弹性收缩。

【讨论】：