How to make height same as sibling height

Question

The below is my HTML. I have a total of 3 cards in three columns. The height of one card is set to flex so it gets auto adjusted to its content and I want the same height to be reflected to its sibling cards. Also, my requirement is not to use tables. I have tried display CSS property so far without success. I have attached an image of how it looks so far

:

.user-panel,
.user-panel .card {
  min-height: 170px;
  display: flex;
}

.user-panel,
.user-panel .card .item {
  height: inherit;
  text-align: center;
}

<div class="row no-padding user-panel">
  <div class="col col-33 no-padding">
    <div class="card  no-padding">
      <div class="item item-text-wrap">
        <span>
            <div>
               <div class="row"><i class="user-profile-icon"></i> </div>
                  <div>{{data}}</div>
                  <div>(015106)</div>
               </div>
        </span>
      </div>
    </div>
  </div>
  <div class="col col-33 no-padding">
    <div class="card  no-padding">
      <div class="item item-text-wrap">
        <span>
             <div>
               <div>MY ACCESSES</div>
              </div>
         </span>
      </div>
    </div>
  </div>
  <div class="col col-33 no-padding">
    <div class="card  no-padding">
      <div class="item item-text-wrap">
        <span>
            <div>
                <div>MY ACCESSES</div>
             </div>
         </span>
      </div>
    </div>
  </div>

</div>

http://stackoverflow.com/a/33147/3583859 Workaround may help — Vijay Kumbhoje, May 04 '17 at 04:54
I'm pretty sure having `div`s inside `span`s is illegal in HTML — ESR, May 04 '17 at 05:20

score 9 · Answer 1 · edited May 04 '17 at 05:09

Using flexbox approach you can easily achieve this. The height of the div in a row will be according the height of max height of any element.

Here is a working example I have created using your code:

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

.user-panel {
  display: flex;
  flex-wrap: wrap;
}

.user-panel .col {
  display: flex;
  padding: 0.5em;
  width: 33.33%;
}

.card {
  display: flex;
  flex-direction: column;
  background-color: red;
  padding: 1em;
  width: 100%;
}

.card .item-text-wrap {
  flex: 1 0 auto;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="row no-padding user-panel">
  <div class="col col-33 no-padding">
    <div class="card  no-padding">
      <div class="item item-text-wrap">
        <span>
           <div>
               <div class="row"><i class="fa fa-user fa-4x"></i> </div>
               <div>Some Data</div>
               <div>Some Data</div>
           </div>
        </span>
      </div>
    </div>
  </div>
  <div class="col col-33 no-padding">
    <div class="card  no-padding">
      <div class="item item-text-wrap">
        <span>
           <div>
               <div>MY ACCESSES</div>
           </div>
        </span>
      </div>
    </div>
  </div>
  <div class="col col-33 no-padding">
    <div class="card  no-padding">
      <div class="item item-text-wrap">
        <span>
           <div>
               <div>MY ACCESSES My Access MY ACCESSES My Access MY ACCESSES My Access MY ACCESSES My Access MY ACCESSES My Access MY ACCESSES My Access MY ACCESSES My Access MY ACCESSES </div>
           </div>
        </span>
      </div>
    </div>
  </div>

this is more cleaner approach than the accepted answer.thanks — Shoyeb Memon, Nov 04 '18 at 15:33

score 4 · Accepted Answer · answered May 04 '17 at 04:56

Add height: 100%; to .card and move the min-height to the outer container.

.user-panel {
  min-height: 170px;
}

.user-panel, .user-panel .card {
  display: flex;
  border: 1px solid #ccc;
  height: 100%;
}

.user-panel,
.user-panel .card .item {
  height: inherit;
  text-align: center;
}

<div class="row no-padding user-panel">
  <div class="col col-33 no-padding">
    <div class="card  no-padding">
      <div class="item item-text-wrap">
        <span>
          <div>
            <div class="row"><i class="user-profile-icon"></i> </div>
            <div>{{data}}</div>
            <div>(015106)</div>
            <div>(015106)</div>
            <div>(015106)</div>
            <div>(015106)</div>
            <div>(015106)</div>
            <div>(015106)</div>
            <div>(015106)</div>
            <div>(015106)</div>
            <div>(015106)</div>
            <div>(015106)</div>
            <div>(015106)</div>
          </div>
        </span>
      </div>
    </div>
  </div>
  <div class="col col-33 no-padding">
    <div class="card  no-padding">
      <div class="item item-text-wrap">
        <span>
            <div>
              <div>MY ACCESSES</div>
            </div>
            </span>
      </div>
    </div>
  </div>
  <div class="col col-33 no-padding">
    <div class="card  no-padding">
      <div class="item item-text-wrap">
        <span>
          <div>
            <div>MY ACCESSES</div>
            </div>
          </span>
      </div>
    </div>
  </div>
</div>
<div class="row no-padding user-panel">
  <div class="col col-33 no-padding">
    <div class="card  no-padding">
      <div class="item item-text-wrap">
        <span>
          <div>
            <div class="row"><i class="user-profile-icon"></i> </div>
            <div>{{data}}</div>
            <div>(015106)</div>
          </div>
        </span>
      </div>
    </div>
  </div>
  <div class="col col-33 no-padding">
    <div class="card  no-padding">
      <div class="item item-text-wrap">
        <span>
            <div>
              <div>MY ACCESSES</div>
            </div>
            </span>
      </div>
    </div>
  </div>
  <div class="col col-33 no-padding">
    <div class="card  no-padding">
      <div class="item item-text-wrap">
        <span>
          <div>
            <div>MY ACCESSES</div>
            </div>
          </span>
      </div>
    </div>
  </div>
</div>

How to make height same as sibling height

2 Answers2