Question

我在尝试实现设计用例之一时遇到了麻烦（我不是设计师/用户界面开发人员）。

我需要使父div 水平可滚动，而其孩子为垂直可滚动。可以有n个孩子。

我正在尝试使用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>

Answer 1

为了使内部滚动水平，您需要给methodC s一个最小宽度，该宽度大于容器。

要使上下文div滚动，只需给它们一个高度即可。

还请注意-ID应该是唯一的，因此我将上下文div ID更改为类

ReferenceYearBusinessLogic

methodB

可滚动的多嵌套Flexbox，父母和孩子均可滚动

1 个答案: