Question

似乎在使用带有nowrap的flex时 - 滚动条只允许向右移动，但左侧的项目仍然隐藏。我已经创建了一个doceopen示例来显示问题。 http://codepen.io/anon/pen/QpgvoZ

在下面的例子中，似乎水平滚动条仅在右侧工作，但左侧的项目只是隐藏且无法访问。我在Chrome和FF中看到了这种行为（IE11似乎正常工作：-O）

我在这里失踪了什么？

谢谢！

＆＃13;

@import "compass/css3";
.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row nowrap;
  justify-content: space-around;
}

.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;
  min-width: 200px;
  height: 150px;
  margin-top: 10px;
  flex-shrink: 0;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}

＆＃13;

<ul class="flex-container">
  <li class="flex-item">111111</li>
  <li class="flex-item">222222</li>
  <li class="flex-item">333333</li>
  <li class="flex-item">444444</li>
  <li class="flex-item">555555</li>
  <li class="flex-item">666666</li>
  <li class="flex-item">777777</li>
  <li class="flex-item">888888</li>
  <li class="flex-item">999999</li>
</ul>

＆＃13;

Answer 1

你可以删除

吗？

-webkit-flex-flow: row nowrap;
justify-content: space-around;

并将overflow-x:auto;添加到.flex-container 它似乎解决了你的问题

使用nowrap在flex中滚动行为

1 个答案: