two independent flexbox children with same height without javascript

Question

In the markup below, these left and right flexbox containers are scrollable so that users can compare details.

I need would like a way of being able to have the child elements at the same index have the same height even though their content is different.

For example, the 2 address divs should have the same height.

I can do this with javascript but is it possible with just css?

* {
  box-sizing: border-box;
}

div,
main {
  border: 1px solid red;
}

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  height: 100vh;
}

main {
  height: 100%;
  flex: 1 1 0;
  display: flex;
}

.row {
  display: flex;
  flex: 1;
}

.col {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  display: flex;
}

.container {
  display: flex;
  flex: 1;
}

.container {
  display: flex;
}

.container .left,
.container .right {
  flex: 1;
  height: 100%;
  overflow: auto;
}

main .row:first-child {
  height: 100%;
}

<html>

  <body>

    <header>Header</header>

    <main>
      <div class="row">
        <div class="col container">
          <div class="left">
            <div class="name">
              <strong>Name</strong> BoB Smith</div>
            <div class="address">
              <strong>Address</strong>
              <p>21</p>
              <p>Somewhere Street</p>
              <p>Somewhere City</p>
              <p>That Country</p>
              <P>BWERE EREWW</P>
            </div>
            <div>
              <strong>Something else</strong>
              <ul>
                <li>One</li>
                <li>Two</li>
                <li>Three</li>
                <li>Four</li>
                <li>Five</li>
                <li>Six</li>
                <li>Seven</li>
                <li>Eight</li>
                <li>Nine</li>
                <li>Ten</li>
              </ul>
            </div>
          </div>
          <div class="right">
            <div class="name">
              <strong>Name</strong> BoB Smith</div>
            <div class="address">
              <strong>Address</strong>
              <p>21</p>
              <p>Somewhere Street</p>
            </div>
            <div>
              <strong>Something else</strong>
              <ul>
                <li>One</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </main>
  </body>

</html>

do you mean that `something else` 2 will be in some line of 1?] — לבני מלכה, May 02 '18 at 05:56
they should not all be the same height. So as address on the left pane has more height, the address on the right hand side should expand to the same height. In the example below, Name has a massive amount of space for 1 line of text — dagda1, May 02 '18 at 05:59
Not possible for the height to be fully dynamic. They are independent of each other. — Jacob Goh, May 02 '18 at 06:02
@JacobGoh that is what I thought, I just hoped there might be a trick — dagda1, May 02 '18 at 06:03
unless they are siblings, otherwise, i feel pretty sure that it's not possible — Jacob Goh, May 02 '18 at 06:05

K K · Answer 1 · 2018-05-02T06:30:19.723

0

Solution 1

You might need to change the HTML structure. You need a table: http://jsfiddle.net/GCu2D/3566/

    <table class="table">
  <tbody>
    <tr>
      <td>Name</td>
      <td>Name</td>
    </tr>
    <tr>
      <td>Address</td>
      <td><strong>Address</strong>
        <p>21</p>
        <p>Somewhere Street</p>
        <p>Somewhere City</p>
        <p>That Country</p>
        <P>BWERE EREWW</P>
      </td>
    </tr>
    <tr>
      <td>Something</td>
      <td>Something</td>
    </tr>
  </tbody>
</table>

Solution 2

With existing layout and specifying width: https://jsfiddle.net/7z9y7pw2/

If yes, then you can just add this code for example:

.left>div,
.right>div {
  height: 30%;
}

This is just for representation, you can change the CSS rule, values based on your choice.

edited May 02 '18 at 06:30

answered May 02 '18 at 05:57

K K

17,794
4
30
39

they should not all be the same height. So as address on the left pane has more height, the address on the right hand side should expand to the same height. In the example above, Name has a massive amount of space for 1 line of text – dagda1 May 02 '18 at 05:59
@dagda1 you can change the CSS rule if you need different height for name. The CSS rule in answer is just for representation that you can follow similar approach for name as well. – K K May 02 '18 at 06:01
I don't want to specify a height at all. But it probably is not possible without javascript. Percentages might work. – dagda1 May 02 '18 at 06:03
@dagda1 Check updated solution – K K May 02 '18 at 06:30

score 0 · Answer 2 · answered May 02 '18 at 08:15

Here is my solution:

The main idea is set parent of two div(which has address class) to display flex.

<html>
    <head>
    <style>
        * {
  box-sizing: border-box;
}

div,
main {
  border: 1px solid red;
}

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  height: 100vh;
}

main {
  height: 100%;
  flex: 1 1 0;
  display: flex;
}

.row {
  display: flex;
  flex: 1;
}

.address {
    flex-grow: 1;
}

.first {
    display:flex;
}

.second {
    display:flex;
}



main .row:first-child {
  height: 100%;
}
    </style>
    </head>
  <body>

    <header>Header</header>

    <main>
      <div class="row">
        <div class="col container">
          <div class="first">

            <div class="address">
            <div class="name">
              <strong>Name</strong> BoB Smith</div>
              <strong>Address</strong>
              <p>21</p>
              <p>Somewhere Street</p>
              <p>Somewhere City</p>
              <p>That Country</p>
              <P>BWERE EREWW</P>
            </div>
             <div class="address">
             <div class="name">
              <strong>Name</strong> BoB Smith</div>
              <strong>Address</strong>
              <p>21</p>
              <p>Somewhere Street</p>
            </div>         
          </div>       
        </div>
      </div>
    </main>
  </body>

</html>

two independent flexbox children with same height without javascript

2 Answers2