Flex: Scrollable Div Inside Flex-column

I would like the sub-div2 to be scrollable where .main and div2 are of dynamic height. Current Plunker Following is the code: HTML:

Solution 1:

I assume you mean like this:

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  height: 100%;
}
.main {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.div1 {
  flex: 1 1 auto;
  background: lightgreen;
}
.div2 {
  display: flex;
  flex: 2 1 auto;
  background: orange;
  overflow: hidden;
}
.sub-div2 {
  overflow: auto;
  background: red;
  flex: 1;
}
.div3 {
  flex: 1 1 auto;
  background: lightblue;
}

<div class="main">
  <div class="divs div1">DIV1</div>
  <div class="divs div2">DIV2
    <div class="sub-div2">
      <p>SUB DIV2 SCROLLABLE</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio excepturi quas recusandae temporibus quidem tempore ducimus asperiores laborum, unde atque aspernatur neque libero quia nam optio aliquid molestiae. Cum iste, quaerat adipisci
        est. Magni nostrum, ad praesentium quasi dolore reprehenderit, officiis distinctio voluptatibus vero sed maxime fugiat odio quibusdam repellat laborum a alias neque corporis cum recusandae quis! Quasi sint necessitatibus iste, aspernatur soluta
        excepturi perferendis fugit facilis pariatur voluptate. Et quasi expedita nostrum, neque odio tempora voluptas voluptatibus cupiditate. Molestiae, quos dolorem, aliquid tenetur culpa excepturi. Recusandae iure veniam fuga mollitia accusamus animi
        maxime officiis dolorum obcaecati fugit laboriosam sapiente labore amet ex praesentium molestias ad, vel nostrum, perspiciatis eum. Recusandae rerum fugiat officia totam earum! Iste culpa tempore ab totam doloribus veritatis soluta magnam maxime
        sit nemo nihil distinctio numquam itaque autem, facere, quam earum aperiam expedita dolorem laborum, cum. Ipsa, culpa. Maiores incidunt, aut ipsam aperiam quasi sit, at recusandae error facere aliquam repellendus minus praesentium accusantium
        labore mollitia eaque accusamus exercitationem natus magnam doloremque officiis modi! Adipisci esse fugiat, hic. Dolor alias ducimus sapiente ullam blanditiis beatae, quibusdam minima ipsa culpa adipisci est architecto voluptatem fugiat, modi
        distinctio reprehenderit voluptate provident. Reiciendis vitae nemo earum quod, vel assumenda incidunt consectetur eligendi beatae numquam laboriosam et quis labore asperiores tempora culpa, ea aut illum adipisci sapiente. Ab nostrum eligendi
        placeat sed quasi doloremque possimus iste dicta, at, dolorum quis quisquam sit pariatur deserunt fuga vero qui nam consequuntur. Iusto earum eius facilis unde tempora mollitia soluta aliquid.</p>
    </div>
  </div>
  <div class="divs div3">DIV3</div>
</div>

Codepen Demo

Solution 2:

If possible than you can add height to sub-div2 e.g.

height: 350px;

Solution 3:

This is how I solved the problem. All I had to do was make div2 a flex object with it's direction being column. Solution in Plunker

Here is the final CSS:

.main{
  display: flex;
  flex-direction: column;
  height: 100%;
}

.div1{
  flex: 1 1 auto;
  background: lightgreen;
}

.div2{
  flex: 2 1 auto;
  background: orange;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.sub-div2{
  overflow:auto;
  background:red;
}

.div3{
  flex: 1 1 auto;
  background: lightblue;
}

Share