Scrollable multi-nested Flexbox with both parent and children scrollable

Question

I am facing trouble while trying to implement one of design use-case (I am no designer/ui-developer).

I need to make a parent div horizontally scrollable, while its children as vertically scrollable. There can be n-number of children.

I am trying to use flex but it's not suiting the requirement. No existing answer on SO is having what I need. Any help would be appreciated.

Codepen link: 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

In order to make the inner scroll horizontally, you need to give the context-divs a min-width that will be larger than the container.

To make the context divs scroll, just give them a height.

Please also note - ids should be unique so I would change the context div id to a class

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