英文:
What's causing my flexbox container to not scroll horizontally despite using overflow-x: scroll?
问题
I have no idea what I'm doing wrong here and this was supposed to work. I'm not able to set the desired width for the child elements and make the parent overflow with a horizontal scroll. After a specific width the width won't increase and seems to get stuck at that point.
This is the html -
<div className="container">
<div className="item">item 1</div>
<div className="item">item 2</div>
<div className="item">item 2</div>
</div>
And the css -
.container {
display: flex;
overflow-x: scroll;
}
.item {
height: 5rem;
width: 25rem;
border: 2px solid black;
}
codesandbox link: https://codesandbox.io/s/pedantic-darkness-yx1wht
英文:
I have no idea what I'm doing wrong here and this was supposed to work. I'm not able to set the desired width for the child elements and make the parent overflow with a horizontal scroll. After a specific width the width won't increase and seems to get stuck at that point.
This is the html -
<div className="container">
<div className="item">item 1</div>
<div className="item">item 2</div>
<div className="item">item 2</div>
</div>
And the css -
.container {
display: flex;
overflow-x: scroll;
}
.item {
height: 5rem;
width: 25rem;
border: 2px solid black;
}
codesandbox link : https://codesandbox.io/s/pedantic-darkness-yx1wht
答案1
得分: 1
以下是翻译好的部分：
解决方案之一是使用min-width而不仅仅是width，如果需要响应式变化，您可以继续使用min-width进行操作。
英文:
One of the solutions to this is adding min-width instead of just width and if you need it in responsive to change you can continue manipulating with min-width
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论