我在尝试实现一个设计用例时遇到了麻烦(我不是设计师/用户界面开发人员)。
我需要制作一个父 div 水平可滚动，而其子垂直可滚动。可以有n个 child 。
我正在尝试使用 flex 但它不符合要求。 SO 上没有现成的答案可以满足我的需要。任何帮助将不胜感激。
Codepen 链接:https://codepen.io/anon/pen/dQxOER
#main-container {
width: 800px;
padding: 20px;
margin: 20px;
border: 2px solid green;
}
#contexts-container {
display: flex;
height: 600px;
white-space: normal;
width: 2500px;
overflow: scroll;
padding: 20px;
margin: 20px;
border: 2px solid red;
}
#context-container {
padding: 20px;
overflow-y: scroll;
white-space: normal;
}<div id="main-container">
<div id="some-child">
Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.
Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some
text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.
Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some
text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.
Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some
text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.
Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.
</div>
<div id="contexts-container" class="border-top border-light">
<div id="context-container" class="">
<h2>Context Title</h2>
<div class="answers-container" class="">
<div class="answer-container">
<h3>Answer Title</h3>
<p>
Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description.
Answer Description. Answer Description. Answer Description.
</p>
</div>
<div class="answer-container">
<h3>Answer Title</h3>
<p>
Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer De scription. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description.
Answer Description. Answer Description. Answer Description.
</p>
</div>
<div class="answer-container">
<h3>Answer Title</h3>
<p>
Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description.
Answer Description. Answer Description. Answer Description.
</p>
</div>
<div class="answer-container">
<h3>Answer Title</h3>
<p>
Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description.
Answer Description. Answer Description. Answer Description.
</p>
</div>
<div class="answer-container">
<h3>Answer Title</h3>
<p>
Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description.
Answer Description. Answer Description. Answer Description.
</p>
</div>
</div>
</div>
<div id="context-container" class="">
<h2>Context Title</h2>
<div class="answers-container" class="">
<div class="answer-container">
<h3>Answer Title</h3>
<p>
Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description.
Answer Description. Answer Description. Answer Description.
</p>
</div>
<div class="answer-container">
<h3>Answer Title</h3>
<p>
Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description.
Answer Description. Answer Description. Answer Description.
</p>
</div>
<div class="answer-container">
<h3>Answer Title</h3>
<p>
Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description.
Answer Description. Answer Description. Answer Description.
</p>
</div>
<div class="answer-container">
<h3>Answer Title</h3>
<p>
Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description.
Answer Description. Answer Description. Answer Description.
</p>
</div>
<div class="answer-container">
<h3>Answer Title</h3>
<p>
Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description.
Answer Description. Answer Description. Answer Description.
</p>
</div>
</div>
</div>
<div id="context-container" class="">
<h2>Context Title</h2>
<div class="answers-container" class="">
<div class="answer-container">
<h3>Answer Title</h3>
<p>
Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description.
Answer Description. Answer Description. Answer Description.
</p>
</div>
<div class="answer-container">
<h3>Answer Title</h3>
<p>
Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description.
Answer Description. Answer Description. Answer Description.
</p>
</div>
<div class="answer-container">
<h3>Answer Title</h3>
<p>
Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description.
Answer Description. Answer Description. Answer Description.
</p>
</div>
<div class="answer-container">
<h3>Answer Title</h3>
<p>
Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description.
Answer Description. Answer Description. Answer Description.
</p>
</div>
<div class="answer-container">
<h3>Answer Title</h3>
<p>
Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description.
Answer Description. Answer Description. Answer Description.
</p>
</div>
</div>
</div>
<div id="context-container" class="">
<h2>Context Title</h2>
<div class="answers-container" class="">
<div class="answer-container">
<h3>Answer Title</h3>
<p>
Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description.
Answer Description. Answer Description. Answer Description.
</p>
</div>
<div class="answer-container">
<h3>Answer Title</h3>
<p>
Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description.
Answer Description. Answer Description. Answer Description.
</p>
</div>
<div class="answer-container">
<h3>Answer Title</h3>
<p>
Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description.
Answer Description. Answer Description. Answer Description.
</p>
</div>
<div class="answer-container">
<h3>Answer Title</h3>
<p>
Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description.
Answer Description. Answer Description. Answer Description.
</p>
</div>
<div class="answer-container">
<h3>Answer Title</h3>
<p>
Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description.
Answer Description. Answer Description. Answer Description.
</p>
</div>
</div>
</div>
<div id="context-container" class="">
<h2>Context Title</h2>
<div class="answers-container" class="">
<div class="answer-container">
<h3>Answer Title</h3>
<p>
Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description.
Answer Description. Answer Description. Answer Description.
</p>
</div>
<div class="answer-container">
<h3>Answer Title</h3>
<p>
Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description.
Answer Description. Answer Description. Answer Description.
</p>
</div>
<div class="answer-container">
<h3>Answer Title</h3>
<p>
Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description.
Answer Description. Answer Description. Answer Description.
</p>
</div>
<div class="answer-container">
<h3>Answer Title</h3>
<p>
Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description.
Answer Description. Answer Description. Answer Description.
</p>
</div>
<div class="answer-container">
<h3>Answer Title</h3>
<p>
Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description.
Answer Description. Answer Description. Answer Description.
</p>
</div>
</div>
</div>
</div>
</div>最佳答案
为了使内部水平滚动，您需要为 context-div 提供一个大于容器的最小宽度。
要使上下文 div 滚动，只需给它们一个高度。
另请注意 - id 应该是唯一的，因此我会将上下文 div id 更改为一个类
* {
box-sizing:border-box;
}
#main-container {
width: 800px;
padding: 20px;
margin: 20px;
border: 2px solid green;
}
#contexts-container {
padding: 20px;
margin: 20px;
border: 2px solid red;
overflow: auto;
display: flex;
}
#contexts-container>div {
padding: 20px;
min-width: 500px; /* can be what you want */
height: 400px; /* can be what you want */
overflow: auto;
}<div id="main-container">
<div id="some-child">
Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.
Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some
text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.
Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some
text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.
Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some
text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.
Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.
</div>
<div id="contexts-container" class="border-top border-light">
<div id="context-container" class="">
<h2>Context Title</h2>
<div class="answers-container" class="">
<div class="answer-container">
<h3>Answer Title</h3>
<p>
Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description.
Answer Description. Answer Description. Answer Description.
</p>
</div>
<div class="answer-container">
<h3>Answer Title</h3>
<p>
Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer De scription. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description.
Answer Description. Answer Description. Answer Description.
</p>
</div>
<div class="answer-container">
<h3>Answer Title</h3>
<p>
Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description.
Answer Description. Answer Description. Answer Description.
</p>
</div>
<div class="answer-container">
<h3>Answer Title</h3>
<p>
Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description.
Answer Description. Answer Description. Answer Description.
</p>
</div>
<div class="answer-container">
<h3>Answer Title</h3>
<p>
Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description.
Answer Description. Answer Description. Answer Description.
</p>
</div>
</div>
</div>
<div id="context-container" class="">
<h2>Context Title</h2>
<div class="answers-container" class="">
<div class="answer-container">
<h3>Answer Title</h3>
<p>
Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description.
Answer Description. Answer Description. Answer Description.
</p>
</div>
<div class="answer-container">
<h3>Answer Title</h3>
<p>
Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description.
Answer Description. Answer Description. Answer Description.
</p>
</div>
<div class="answer-container">
<h3>Answer Title</h3>
<p>
Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description.
Answer Description. Answer Description. Answer Description.
</p>
</div>
<div class="answer-container">
<h3>Answer Title</h3>
<p>
Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description.
Answer Description. Answer Description. Answer Description.
</p>
</div>
<div class="answer-container">
<h3>Answer Title</h3>
<p>
Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description.
Answer Description. Answer Description. Answer Description.
</p>
</div>
</div>
</div>
<div id="context-container" class="">
<h2>Context Title</h2>
<div class="answers-container" class="">
<div class="answer-container">
<h3>Answer Title</h3>
<p>
Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description.
Answer Description. Answer Description. Answer Description.
</p>
</div>
<div class="answer-container">
<h3>Answer Title</h3>
<p>
Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description.
Answer Description. Answer Description. Answer Description.
</p>
</div>
<div class="answer-container">
<h3>Answer Title</h3>
<p>
Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description.
Answer Description. Answer Description. Answer Description.
</p>
</div>
<div class="answer-container">
<h3>Answer Title</h3>
<p>
Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description.
Answer Description. Answer Description. Answer Description.
</p>
</div>
<div class="answer-container">
<h3>Answer Title</h3>
<p>
Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description.
Answer Description. Answer Description. Answer Description.
</p>
</div>
</div>
</div>
<div id="context-container" class="">
<h2>Context Title</h2>
<div class="answers-container" class="">
<div class="answer-container">
<h3>Answer Title</h3>
<p>
Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description.
Answer Description. Answer Description. Answer Description.
</p>
</div>
<div class="answer-container">
<h3>Answer Title</h3>
<p>
Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description.
Answer Description. Answer Description. Answer Description.
</p>
</div>
<div class="answer-container">
<h3>Answer Title</h3>
<p>
Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description.
Answer Description. Answer Description. Answer Description.
</p>
</div>
<div class="answer-container">
<h3>Answer Title</h3>
<p>
Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description.
Answer Description. Answer Description. Answer Description.
</p>
</div>
<div class="answer-container">
<h3>Answer Title</h3>
<p>
Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description.
Answer Description. Answer Description. Answer Description.
</p>
</div>
</div>
</div>
<div id="context-container" class="">
<h2>Context Title</h2>
<div class="answers-container" class="">
<div class="answer-container">
<h3>Answer Title</h3>
<p>
Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description.
Answer Description. Answer Description. Answer Description.
</p>
</div>
<div class="answer-container">
<h3>Answer Title</h3>
<p>
Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description.
Answer Description. Answer Description. Answer Description.
</p>
</div>
<div class="answer-container">
<h3>Answer Title</h3>
<p>
Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description.
Answer Description. Answer Description. Answer Description.
</p>
</div>
<div class="answer-container">
<h3>Answer Title</h3>
<p>
Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description.
Answer Description. Answer Description. Answer Description.
</p>
</div>
<div class="answer-container">
<h3>Answer Title</h3>
<p>
Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description. Answer Description.
Answer Description. Answer Description. Answer Description.
</p>
</div>
</div>
</div>
</div>
</div>关于html - 可滚动的多嵌套 Flexbox，父项和子项都可滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53654686/