Two divs, one under another, one dynamic and second fill the rest of space

Question

I have one div 500x500.

I need to create two divs indside that div, one above another. One of top have to be dynamic, with height based on content text. Second one have to fill the rest of space, and have dynamic image based on size of that div, while keeping aspect ratio. Anybody knows how to achieve that? I think this is impossible using only css, so if you have any propositions to resolve this problem with javascript, then I will be very greatfull.

Examples:

Answer 1

I think having a fixed height and width of parent will cause the child elements to overflow.

Here is the JsFiddle Example with dynamic height and width of parent which works as per your expectation.

.parent{
  background-color:yellow;
  padding:2em;
  width:100%;
  display:flex;
  flex-direction: column;
}

.child{
  height:auto;
}

#child1{
  flex:1;
   background-color:red;
   padding:0.5em;
}

#child2{
  flex:1;
   background-color:blue;
   padding:1em 1.5em;
   text-align:center;
}

#child2 img{
  
  margin: 0 auto;
  height: 90%;
  width: 90%;
}

<div class="parent">
   <div class="child" id="child1">
   sometest sometest sometestsometest sometest sometest
   sometest sometest sometestsometest sometest sometest
   sometest sometest sometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometestsometest sometest 
   </div>
   <div class="child" id="child2">
     <img src=""/>
   </div>
</div>

However you can also have static height and width as you have stated in this case you will have to set the overflow property of parent to auto.

Try the solution an let me know if you require something else.