使用 Css 在固定宽度的 div 内获取垂直滚动

Question

我有固定尺寸 div 比如说 500px。它里面有一个较小的 div。当 divs 的数量增加时，它开始提供水平滚动。我希望它里面有一个垂直滚动条。我试过这样做：

width: 1509px;
overflow-x: hidden;
overflow-y: scroll;

这没有用，所以我希望你们能帮助我。

提前致谢！

Answer 1

是这样的吗？

.container, .item {
  display: inline-block;
  box-sizing: border-box;
}

.container {
  width: 200px;
  border: 1px solid #ddd;
}

.item {
  width: 50px;
  text-align: center;
  padding: 5px;
}

<div class='container'>
  <span class='item'>1</span>
  <span class='item'>2</span>
  <span class='item'>3</span>
  <span class='item'>4</span>
  <span class='item'>5</span>
  <span class='item'>6</span>
  <span class='item'>7</span>
<div>

Answer 2

这个例子可能对你有帮助。

.parent {
    width: 300px;
    overflow-x: scroll;
    overflow-y: hidden;
}
.child {
    width: 500px;
}

<div class="parent">
 <div class="child">
 This is content. This content needs bottom scroll. This is content. This content needs bottom scroll.
 </div>
</div>

Answer 3

我发现了我的错误：

display: flex;
flex-wrap: wrap;
height: 265px;
margin-bottom: 12px;
overflow-y: scroll;

我没有设置 flex-wrap。

使用 Css 在固定宽度的 div 内获取垂直滚动

Get vertical scroll inside a div with fixed width using Css

html

css

user-interface

web

vertical-scrolling