Flex: Прокручиваемый div внутри flex-column

Question

Я хотел бы, чтобы sub-div2 был прокручиваем, где .main и div2 имеют динамическую высоту. Current Plunker

Ниже приводится код:

HTML:

<div class="main"> 
     <div class="divs div1">DIV1</div> 
     <div class="divs div2">DIV2 
     <div class="sub-div2"> 
      <p>SUB DIV2 SCROLLABLE</p> 
      <p>Hello!</p>..... 
     </div> 
     </div> 
     <div class="divs div3">DIV3</div> 
    </div> 

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; 
} 

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

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

Это то, что я хотел бы достичь:

Answer 1

Если возможно, вы можете добавить высоту в sub-div2 , например.

height: 350px; 

Answer 2

Я предполагаю, что вы имеете в виду, как это:

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

Answer 3

Это, как я решил проблему. Все, что мне нужно было сделать, это сделать div2 гибким объектом, указав его направление. Solution in Plunker

Вот окончательный 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; 
}