Creating a div that expands to fill up the remaining height within a flex-child

Question

Creating a div that expands to fill up the remaining height within a flex-child

I'm facing a challenge with a flex container that contains flex children. Within each flex child, there are two stacked divs, the first of which has an unknown height. My goal is to make the second div fill the remaining height available. I've been searching for solutions using flex properties, but I'm unsure how to implement them since the parent of these two divs is also a flex child.

Here's a simplified version of the code:

<div class="flex-parent-row">

   <div class="flex-child">

      <div class="auto-height"></div>
      <div class="i-want-this-one-to-fill-remaining-height"></div>

   </div>

   ...more flex children...

</div>

For now, placing the ".auto-height" div inside the ".i-want-this-one-to-fill-remaining-height" div is not an option.

Any assistance would be greatly appreciated! Thank you!

EDIT: I've created a comprehensive Fiddle: https://jsfiddle.net/vanden1976/dLg20x4s/26

EDIT-2: Issue resolved! Thank you for your suggestions! Here's the updated Fiddle with the solution: https://jsfiddle.net/vanden1976/dLg20x4s/29

css flexbox

Answer 1

Answer №1

It would be beneficial if you could share your current CSS code so we can better assist you in achieving your goal. However, the example provided below should give you some insight on how to solve your issue.

Html:

<div class="flex-parent-row">
   <div class="flex-child">
      <div class="auto-height"> auto div</div>
      <div class="i-want-this-one-to-fill-remaining-height"> fill remaining div</div>
   </div>
</div>

CSS:

.flex-parent-row {
    display: flex;
    flex-direction: column;
    height: 200px;
    width: 500px;
    border: 1px solid #000;
 }
.flex-child {
    border: 1px solid #000;
    background-color: red;
    display: flex;  
    flex-direction: column;
    flex-grow: 1; 
 }
 .auto-height {
    background: orange;
 }

 .i-want-this-one-to-fill-remaining-height {
    flex-grow: 1;
    background-color: lightblue;
 }

If you require further assistance, please share more of your code with us.

Answer 2

It would be beneficial if you could share your current CSS code so we can better assist you in achieving your goal. However, the example provided below should give you some insight on how to solve your issue.

Html:

<div class="flex-parent-row">
   <div class="flex-child">
      <div class="auto-height"> auto div</div>
      <div class="i-want-this-one-to-fill-remaining-height"> fill remaining div</div>
   </div>
</div>

CSS:

.flex-parent-row {
    display: flex;
    flex-direction: column;
    height: 200px;
    width: 500px;
    border: 1px solid #000;
 }
.flex-child {
    border: 1px solid #000;
    background-color: red;
    display: flex;  
    flex-direction: column;
    flex-grow: 1; 
 }
 .auto-height {
    background: orange;
 }

 .i-want-this-one-to-fill-remaining-height {
    flex-grow: 1;
    background-color: lightblue;
 }

If you require further assistance, please share more of your code with us.

Creating a div that expands to fill up the remaining height within a flex-child

Answer №1

Similar questions

The functionality of Jquery UI is not compatible with version 1.12

"Effortless alignment: Centralizing CSS styling across the entire

Tips for preventing DIV elements from overlapping

The conditional CSS appears to be malfunctioning

Stable navigation bar implemented with a grid design

Novice problem with the <div> tag

Creating a horizontal layout for list items that are responsive using CSS

Creating a three-row CSS layout where the middle row aligns to the right side

Tips for applying a class to two elements when a checkbox is clicked and avoiding duplicated URL strings

How to customize the color of the clock symbol in a MUI TextField set to type 'time'

Mouse click failing to trigger CSS property update

Is the appearance of the Select Box altered when using Opera browser?

Troubleshooting problem with Angular 2 in Internet Explorer related to the use of [style]="

Modifying text appearance and design in material-ui release 0.15.4

Having trouble making the JavaScript mouseenter function work properly?

Changing the display of elements using Javascript in IE6 by modifying class

Using Selenium to choose an element based on the text of its sibling element

After each animation in the sequence is completed, CSS3 looping occurs

discovering obscured information using jquery

Adjust the transparency of CSS elements using a jQuery selector