sidrakesh sidrakesh - 2 months ago 14
CSS Question

Keep height of children div constant?

I wish to keep the height of the two children div's,

abc
and
def
constant, and each with height half that of their parent,
xyz
. I was able to do this using
flex
in CSS, but in each of the child div
abc
and
def
, I have tables in which rows are added dynamically. This causes the divs
abc
and
def
to expand to accommodate the rows.

I would like each of these to become scrollable when too many rows are added.

I have tried many solutions, but none of them seem to work.

Here is my code:



#xyz {
flex: 1 1 auto;
display: flex;
flex-flow: column;
}
#abc {
width: 100%;
flex: 1;
}
#def {
width: 100%;
flex: 1;
}

<div id="xyz" class="row">
<div id="abc" class="col-border-bottom container-fluid">
<h2>ABC details</h2>
<table id="abc-table"></table>
</div>
<div id="def" class="container-fluid">
<h2>DEF details</h2>
<table id="def-table"></table>
</div>
</div>





Thanks in advance.

Answer

If you are using a flexbox to get the overflow, you should wrap the flexbox child's contents into an absolutely positioned contanier so that it can scroll on overflow.

So here is the summary of what I've changed in your code:

  1. To demonstrate the overflow, set a specific height for xyz container. You can change this height as per your requirement.

  2. Added position: relative and overflow-y: auto to the flexbox children- abc and def.

  3. Wrapped the contents of abc and def into an absolutely positioned box:

    .flex-inner {
      position: absolute;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
    }
    
  4. Added some borders and the tables in the boxes for illustration.

* {
  box-sizing: border-box;
}
#xyz {
  flex: 1 1 auto;
  display: flex;
  flex-flow: column;
  height: 250px;
  border: 1px solid;
}
#abc {
  width: 100%;
  flex: 1;
  border: 1px solid;
  position: relative;
  overflow-y: auto;
}
#def {
  width: 100%;
  flex: 1;
  border: 1px solid;
  position: relative;
  overflow-y: auto;
}
.flex-inner {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}
table {
  border-collapse: collapse;
  width: 100%;
}
table td {
  border: 1px solid red;
}
<div id="xyz" class="row">
  <div id="abc" class="col-border-bottom container-fluid">
    <div class="flex-inner">
      <h2>ABC details</h2>
      <table id="abc-table">
        <tr>
          <td colspan="2">Title</td>
        </tr>
        <tr>
          <td>row</td>
          <td>row</td>
        </tr>
        <tr>
          <td>row</td>
          <td>row</td>
        </tr>
        <tr>
          <td>row</td>
          <td>row</td>
        </tr>
        <tr>
          <td>row</td>
          <td>row</td>
        </tr>
      </table>
    </div>
  </div>
  <div id="def" class="container-fluid">
    <div class="flex-inner">
      <h2>DEF details</h2>
      <table id="def-table">
        <tr>
          <td colspan="2">Title</td>
        </tr>
        <tr>
          <td>row</td>
          <td>row</td>
        </tr>
        <tr>
          <td>row</td>
          <td>row</td>
        </tr>
        <tr>
          <td>row</td>
          <td>row</td>
        </tr>
        <tr>
          <td>row</td>
          <td>row</td>
        </tr>
      </table>
    </div>
  </div>
</div>