水平滚动flex子级

本文介绍了水平滚动flex子级的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我一直在打乱网络，但似乎无法找到可行的解决方案.

I have been scowering the web, but can not seem to get a solution to work.

这是一个示例代码笔:

codepen.io/anon/pen/Wxjjqp

.container { display: flex; } .horizontally-scrolled-items { display: flex; background: lightblue; overflow-x: scroll; } .item { width: 1000px; border: 1px solid blue; }

html:

<div class="container"> <div class="horizontally-scrolled-items"> <div class="item">item1</div> <div class="item">item2</div> <div class="item">item3</div> </div> <div class="aside"> <button>keep me on screen</button> </div> </div>

这个想法是将水平滚动的项目设置为flex:1.如果这些项目大于容器的宽度，则可以滚动它们，将其放在视图中.

The idea is for horizntally-scrolled-items to be flex:1. If the items are greater than the width of the container, for them to scroll, leaving aside in the view.

推荐答案

您可以使用min-width来实现.给您的.item类一个min-width和一个flex-grow: 1;.然后将.horizontally-scrolled-items div设置为width: 100%;.

You can achieve this with min-width. Give your .item class a min-width with a flex-grow: 1;. Then set your .horizontally-scrolled-items div to width: 100%;.

CSS

.horizontally-scrolled-items { width: 100%; } .item { min-width: 400px; flex-grow: 1; }

CodePen