如何使高度与兄弟高度相同

Question

以下是我的HTML。我在三列中共有3张牌。一张卡的高度设置为flex，因此它会自动调整到其内容，我希望将相同的高度反映到其兄弟卡上。另外，我的要求是不使用表格。到目前为止我试过显示CSS属性但没有成功。我附上了迄今为止看起来如何的图像

：

＆＃13;

＆＃13;

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

将height: 100%;添加到.card并将min-height移至外部容器。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用flexbox方法，您可以轻松实现此目的。 行中div的高度将取决于任何元素的最大高度。

  

以下是我使用您的代码创建的一个工作示例：

＆＃13;

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;