Прокручиваемый мульти-вложенный Flexbox с возможностью прокрутки как родительского, так и дочернего элементов

Question

Я столкнулся с проблемой при попытке реализовать один из вариантов использования дизайна (я не дизайнер / пользовательский интерфейс).

Мне нужно сделать родительский div по горизонтали прокручиваемый , в то время как его дочерние элементы по вертикали прокручиваемые .Число детей может быть n.

Я пытаюсь использовать flex, но это не соответствует требованию.Нет ответа на вопрос о том, что мне нужно.Буду признателен за любую помощь.

Ссылка 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

Для того, чтобы сделать внутреннюю прокрутку по горизонтали, вам нужно указать минимальную ширину context-div sa, которая будет больше, чем у контейнера.

Чтобы сделать прокрутку контекстного div, просто задайте ему высоту.

Обратите также внимание: идентификаторы должны быть уникальными, поэтому я бы изменил id контекста div на класс

* {
  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>