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

【问题标题】：Get vertical scroll inside a div with fixed width using Css使用 Css 在具有固定宽度的 div 内获取垂直滚动
【发布时间】：2018-11-29 05:45:06
【问题描述】：

我有一个固定大小的 div，比如 500 像素。它里面有一个较小的div。当 div 的数量增加时，它开始进行水平滚动。我希望它里面有一个垂直滚动。我试过这样做：

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

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

提前致谢！

【问题讨论】：

请分享你到目前为止所做的事情
我已经更新了这个问题。请看一下
div 的 display 设置为 flex 。我认为这就是问题所在。但我有点需要在那里弯曲

标签： html css user-interface web vertical-scrolling

【解决方案1】：

我发现了我的错误：

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

我没有设置 flex-wrap。

【讨论】：

【解决方案2】：

这样的？

.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>

【讨论】：

感谢您的帮助。但不是这个。

【解决方案3】：

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

.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>

【讨论】：

你需要确保你的子div的宽度应该大于父div。
但我不想要水平滚动
对 height 元素做同样的事情并替换 css `overflow-x: hidden;溢出-y：滚动；`
我发现了问题。我没有设置 flex-wrap。