父高度取決於使用CSS的特定小孩

-1

我有一個父div和兩個子div。我希望父母像第二個孩子div一樣高，並且如果第一個孩子div更高，它應該會發生溢出。我將如何去做這個使用CSS？目前我正在使用flexbox。父高度取決於使用CSS的特定小孩

編輯：這是我目前工作的代碼的一個簡單的plunker。現在我已經硬編碼的滾動，但我想在文本高度後動態。

HTML：

<div class="parent"> 
    <div class="child1"> 
     <input ng-model="vm.query" type="text" placeholder="Search" /> 
     <ul > 

      <li ng-repeat="todo in todos"> 
       <a data-toggle="tab">{{todo.name}}</a> 
      </li> 

     </ul> 
    </div> 

    <div class="child2"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc convallis quam mattis, luctus elit ullamcorper, pellentesque diam. Proin odio velit, posuere id ligula non, consectetur tempor urna. Nam aliquam sed ligula et volutpat. Quisque vehicula velit consectetur tortor posuere, et convallis purus euismod. Phasellus elementum tincidunt sapien, vel sollicitudin elit elementum eget. Suspendisse urna sapien, pharetra vel dui sed, finibus molestie dolor. Curabitur efficitur laoreet ligula, vitae lobortis dolor lobortis in. Duis nec augue congue, mattis nisl in, vestibulum neque. Sed eget sollicitudin turpis, a convallis arcu. Donec non commodo dui. Ut mattis lacus quis justo pharetra, ornare pulvinar ex ultricies. Pellentesque faucibus tempus tellus viverra sagittis. Sed nec convallis lorem. Aenean vel tempor nisl. Vivamus quis pulvinar lacus, vel bibendum odio. Mauris aliquet tortor a nisl vestibulum iaculis. 


    </div> 
    </div>

CSS：

.parent{ 
    display: flex; 
} 
.child1{ 

    background-color: #eeeeee; 
    height: 500px; 
    overflow:scroll; 
} 
.child2{ 
    width: 100%; 
}

來源

2015-12-18 Samuel Engström

請提供你已經嘗試了 –

你需要支持Internet Explorer中的代碼？ – nfechner

我會做一個笨蛋 –

Flexbox，就沒有一個機制，這...這是不是應該工作的方式。

據我所知，唯一的選擇是使用應該限制身高的div的定位孩子。

.flex { 
 
    width: 80%; 
 
    margin: 1em auto; 
 
    border: 1px solid grey; 
 
    display: flex; 
 
    padding: .25em; 
 
} 
 
.child { 
 
    background: plum; 
 
    flex: 0 0 50%; 
 
} 
 
.one { 
 
    position: relative; 
 
} 
 
.limited { 
 
    position: absolute; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: auto; 
 
}

<div class="flex"> 
 
    <div class="child one"> 
 
    <div class="limited">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, similique, mollitia? Ipsum necessitatibus laboriosam ea voluptatum totam vitae voluptas exercitationem facilis fuga veritatis obcaecati sint, debitis possimus. Autem culpa omnis nostrum 
 
     cumque eius nisi quos perferendis soluta harum a, quis quae aliquam perspiciatis atque sapiente doloremque molestiae tempore voluptate?. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime aperiam itaque accusantium dolore dignissimos.</div> 
 
    </div> 
 
    <div class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At adipisci excepturi ab illo, fugit, quibusdam quidem omnis odit earum, esse dignissimos corporis id accusamus aspernatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias 
 
    quod iure numquam corrupti odio ipsum.</div> 
 
</div>

來源

2015-12-18 14:02:57

我最近碰到了同樣的問題，並試圖Flexbox的......沒有成功解決這個問題。 Flexbox沒有任何機制可以做到這一點。

但是，我找到的解決方案是將父容器放置在position：relative和第一個孩子的位置：absolute上，然後播放邊距以顯示第一個孩子旁邊的第二個孩子。

.parent{ 
    position: relative; 
} 
.child1{ 
    background-color: #eeeeee; 
    position: absolute; 
    top: 0; 
    bottom:0; 
    left:0; 
    width:25%; 
    overflow-y:scroll; 
} 
.child2{ 
    width: 75%; 
    margin-left: 25%; 
}

plunker here

來源

2015-12-18 14:40:01

父高度取決於使用CSS的特定小孩

回答

相關問題