允许弹性物品保持固定宽度并在容器内水平滚动 [英] Allow flex items to keep fixed width and scroll horizontally inside container

问题描述

我有一个使用display: flex;的父母.它目前有四个孩子(卡)，但可能还有更多.所有的孩子都需要大而相等的宽度. 例如，每个孩子需要一个40%宽度.如果发生这种情况，屏幕上只会容纳一定数量的孩子.我需要能够做到这一点，并让其他孩子可以通过水平滚动来访问.

I have a parent that's using display: flex;. It has four children (cards) currently, but it may have more. All the children need big, but equal, widths. For example, each child needs a 40% width. If that happens, only a certain amount of children will fit on the screen. I need to be able to do that, and have the rest of the children be accessible with horizontal scrolling.

我该如何实现?我尝试使用flex-wrap: no-wrap;，然后增加子级的宽度，但父级不允许这样做.这似乎是有意的，但我基本上想替代此行为.

How do I achieve this? I tried using flex-wrap: no-wrap; and then increasing the width of the children, but the parent doesn't allow that. This seems intentional, but I basically want to override this behaviour.

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

推荐答案

您似乎在搜索CSS overflow属性.

It looks like you're searching for the CSS overflow property.

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

并使孩子们变得不太灵活.

And make the children less flexible.

代替此:

width: 50%;

尝试一下:

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

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

The initial value of flex-shrink is 1, which means the flex item will shrink to avoid overflowing the container. With the code above we override the default with 0, which essentially turns off flex shrink.

这篇关于允许弹性物品保持固定宽度并在容器内水平滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！