Using bootstrap classes, why is my child div flowing outside the parent, instead of just taking up remaining height?

Question

I'm using bootstrap, and so am working with their row and column classes. I have a row, with two child rows. I'd like to be able to set a height, or max height, of the parent row and have the child rows fill up the available space. The child rows I want to fill up the space such that the top child row just grows to be whatever height based on its contents, so nothing special, but the bottom child row fills up whatever available remaining vertical space exists within the parent row.

I'm trying to make a collapsible header area above a content area, below it, that expands to take up the available space as the header expands and collapses.

I have a jsfiddle here which shows my rows and columns, but the bottom child row, which I have set to height 100%, expands outside the bounds of the parent row. I figure the height is being set to 100% of the parent, and not 100% of the available space which is what I am after.

Any idea how to just make the bottom row take up 100% of remaining space?

https://jsfiddle.net/k3zw7vr2/

Edit:

I will also try to include the markup here so you don't have to leave the site. I'm not sure how to use the code examples that you can run here, though.

#parent {
  height: 300px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container mt-5">

  <div class="row p-1 bg-primary" id="parent">
    <div class="col">
    
      <div class="row mb-1 bg-secondary">
        <div class="col">
          I'd like this to be able to be whatever height based on the content
        </div>
      </div>
      
      <div class="row child bg-secondary h-100">
        <div class="col">
          I want this to just take up the remaining height of the parent row
        </div>
      </div>
    </div>
  </div>
  
</div>

I Oh, my bad I should have not fixed from the external js fiddle @Quentin — darligee, Oct 30 '19 at 00:14

score 2 · Accepted Answer · answered Oct 30 '19 at 00:17

Try using d-flex to the child .col and then flex-grow: 1; for the .row that needs remaining height.

#parent {
  height: 300px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container mt-5">

  <div class="row p-1 bg-primary" id="parent">
    <div class="col d-flex" style="flex-flow: column;">

      <div class="row mb-1 bg-secondary">
        <div class="col">
          I'd like this to be able to be whatever height based on the content
        </div>
      </div>

      <div class="row child bg-secondary" style="flex-grow: 1;">
        <div class="col">
          I want this to just take up the remaining height of the parent row
        </div>
      </div>

    </div>

  </div>

</div>

Using bootstrap classes, why is my child div flowing outside the parent, instead of just taking up remaining height?

1 Answers1