水平滚动flex子级 [英] horizontally scrolling flex child

问题描述

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

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

这是一个示例代码笔:

http://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

这篇关于水平滚动flex子级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！