html - Flex:flex-column内的可滚动div

我希望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;
}

这是我要实现的目标：

最佳答案

我想你的意思是这样的：

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

关于html - Flex:flex-column内的可滚动div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34157058/