Flex：flex-column中的可滚动div

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

我认为你的意思是这样的：

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 2

如果可能，可以将高度添加到sub-div2 e.g。

height: 350px;

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