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.

Answer 2

All of this is entirely possible through CSS. It will take some fidgeting around with the property flex . Here is the best tutorial/explanation around for how to use flex correctly.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

As for making sure your image height is relative to the parent div you would just need to define some percentage height on the image and the width will scale automatically.

Eg

Give display: flex to the outside container. You can then define a constant height for your first element and give flex: 1 to your second element. This will make the second element grow to the empty space. Your image will still resize accordingly.

Answer 3

 $(function(){ $("#inside").width($("#inside").height()); }) 

 div{ color: white; padding: 10px; text-align: center; } div div{ margin: 10px; } #outside{ background: rgb(200,200,50); height: 500px; width: 500px; display: flex; flex-direction: column; } #top{ background: rgb(255,0,0); } #bottom{ background: rgb(0,100,100); flex-grow: 1; display: flex; justify-content: center; } #inside{ background: rgb(0,200,0); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="outside"> <div id="top"> content here <br> asdf<br> asdf<br> asdf<br> adsf<br> </div> <div id="bottom"> <div id="inside"> </div> </div> </div>