我想在 content div 而不是整个页面上滚动，我该怎么做？
<html>
<head>
</head>
<body>
<div>
<div style="display: flex">
<div style="margin-right: 50px">Sidebar</div>
<div>
<div>Header</div>
<div id="content" style="overflow-x: auto; white-space: nowrap">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</div>
</div>
</div>
</div>
</body>
</html>最佳答案
@Searene 这就是您使用 flexbox 寻找的答案。 有两个片段:一个是所有内容滚动，另一个是标题固定到位。
这非常简单干净。没有固定宽度或 css hack。
<html>
<head>
</head>
<body>
<div>
<div style="display: flex;flex-direction: row;border: solid 10px">
<div style="margin-right: 50px; background:red">Sidebar</div>
<div style="background:blue; overflow-x:auto;">
<div>Header</div>
<div style="white-space: nowrap;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</div>
</div>
</div>
</div>
</body>
</html>在此代码段中，HEADER 保留在原位，只有内容滚动。
<html>
<head>
</head>
<body>
<div>
<div style="display: flex;flex-direction: row;border: solid 10px">
<div style="margin-right: 50px; background:red">Sidebar</div>
<div style="background:blue; overflow:hidden">
<div>Header stays in place</div>
<div id="content" style="white-space: nowrap; overflow:auto">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</div>
</div>
</div>
</div>
</body>
</html>关于html - 使用 flex 时在 div 而不是整个页面上滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51433544/