使用 Css 在固定宽度的 div 内获取垂直滚动
Get vertical scroll inside a div with fixed width using Css
我有固定尺寸 div 比如说 500px。它里面有一个较小的 div。
当 divs 的数量增加时,它开始提供水平滚动。
我希望它里面有一个垂直滚动条。我试过这样做:
width: 1509px;
overflow-x: hidden;
overflow-y: scroll;
这没有用,所以我希望你们能帮助我。
提前致谢!
是这样的吗?
.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>
这个例子可能对你有帮助。
.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>
我发现了我的错误:
display: flex;
flex-wrap: wrap;
height: 265px;
margin-bottom: 12px;
overflow-y: scroll;
我没有设置 flex-wrap。
我有固定尺寸 div 比如说 500px。它里面有一个较小的 div。 当 divs 的数量增加时,它开始提供水平滚动。 我希望它里面有一个垂直滚动条。我试过这样做:
width: 1509px;
overflow-x: hidden;
overflow-y: scroll;
这没有用,所以我希望你们能帮助我。
提前致谢!
是这样的吗?
.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>
这个例子可能对你有帮助。
.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>
我发现了我的错误:
display: flex;
flex-wrap: wrap;
height: 265px;
margin-bottom: 12px;
overflow-y: scroll;
我没有设置 flex-wrap。