Question

我有一个父div和两个子div。我希望父级别与第二个子级div一样高，如果第一个子级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

父高度取决于使用CSS的特定孩子

2 个答案: