Parent 高度取决于具体 child 使用 CSS

Question

我有一个 parent div 和两个 child div。我希望 parent 与第二个 child div 一样高，如果第一个 child div 更高，它应该会溢出。我将如何使用 CSS 来执行此操作？目前我正在使用 flexbox.

编辑：这是我当前工作代码的简单 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%;
}

Answer 1

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>

Answer 2

我最近遇到了同样的问题，并试图用 flexbox 解决它......但没有成功。 Flexbox 没有任何机制可以做到这一点。

但是，我找到的解决方案是将父容器设为 position:relative，将第一个子容器设为 position:absolute，然后使用 margin 将第二个子容器显示在第一个子容器旁边。

.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

Parent 高度取决于具体 child 使用 CSS

Parent height depending on specific child using CSS

html

css

flexbox