Flex:flex-column内的可滚动div [英] Flex: Scrollable div inside flex-column

问题描述

我希望 sub-div2 是可滚动的，其中 .main 和 div2 具有动态高度.

解决方案

我认为您的意思是这样的:

  html，身体 {高度:100％;边距:0;填充:0;}身体 {高度:100％;}.主要的 {显示:flex;flex-direction:列;高度:100％;}.div1 {flex:1 1自动;背景:浅绿色；}.div2 {显示:flex;flex:2 1自动;背景:橙色；溢出:隐藏；}.sub-div2 {溢出:自动；背景:红色；flex:1;}.div3 {flex:1 1自动;背景:浅蓝色；}  

 < 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坐着，安全地服从精英.区别性的临时性的暂时性的临时性的劳动能力，不规则的非性行为的性行为.cum iste，quaerat adipisciest.Magni nostrum，ad praesentium quadol dolre reprehenderit，officiisdistantio voluptatibus vero sed maxime fugiat odio quibusdam repellat labourum别名neque corporis cum recusandae quis！准圣必要性，曲霉Perferendis fugit facilis pariatur异常.准准实验性鼻质，天体性中性天体，丘比特性.Molestiae，quos dolorem，无液tenetur culpaexcepturi.cus菜益生菌前药，鼻孔药，透明药.Recusandae rerum fugiat officia totam earum！伊斯特·库尔巴·坦佩雷(Iste Culpa tempore)坐nemo nihil不同的numquam itaque autum，facere，quaem earum aperiam expedita dolorem labum，暨.....................................................Ipsa，Culpa.Maiores incidunt，aut ipsam aperiam准坐位，在recusandae错误上，facere aliquam repellendus减去praesentium accusantium劳动莫科蒂亚急需Accusamus exercitationem纳塔斯·麦格南·多洛雷克·奥迪莫迪斯！阿迪皮斯·埃塞·富贾特(Hip.Dolor别名ducimus sapiente ullam blanditiis beatae，quibusdam minima ipsa culpa adipisci est architecto voluptatem fugiat，莫迪区分公积金.死者可动性，动产者不动产和临时工，临时照料者可以照做.sapiente silliente tempour culpa temppa culpa erpa temppa culpa erpa temppa culpa eapa illpa temppa culpa根瘤菌sed准准doloremque possimus iste dicta，位于dolorum quis quisquam坐在pareratur deserunt fuga vero qui nam nam consequuntur.液体的天冬草易溶性.</div></div>< div class ="divs div3"> DIV3</div></div>  

Codepen演示

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

Following is the code:

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

This is what I would like to achieve:

解决方案

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

这篇关于Flex:flex-column内的可滚动div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！