Q:

Parent height depending on specific child using CSS

I have a parent div and two child divs. I want the parent to be as high as the second child div is, and if the first child div is higher it should get an overflow. How would I go about doing this using CSS? Currently I am using flexbox.
Edit:
Here is a simple plunker of my currently working code.
Right now i have hard coded the scroll but i want to have it dynamic after the text height.
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%;
}

A:

Flexbox doesn't have a mechanism for this...that's not the way to's supposed to work.
The only option as far as I am aware is to use a positioned child of the div that is supposed to have restricted height.

.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>

