100% 高度 child 不适合 non-Chrome 浏览器中的 flex parent

Question

我正在用 bootstrap v4 (flexbox) 列制作一些拇指，但我找不到使拇指内容适合整个列的解决方案。

因此，如果一个缩略图比另一个缩略图包含更多内容，它的高度就会更大。

我需要所有缩略图都具有相同的大小，即使它们的内容不同也是如此。它实际上适用于我的项目，但仅适用于 Chrome.

.row {
  display: flex;
  display: -ms-flexbox;
  display: -webkit-box;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
}

.col-6 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
  padding-left: 15px;
  padding-right: 15px;
  width: 100%;
}

.thumb-accommodation {
  height: 100%;
}

.thumb-accommodation__image {
  height: 120px;
  background-color: deeppink;
  color: white;
  padding: 10px;
}

.thumb-accommodation__content {
  background-color: aqua;
  height: calc(100% - 120px);
  padding: 10px;
}

h3 {
  margin: 0
}

<div class="row">
  <div class="col-6">
    <div class="thumb-accommodation">
      <div class="thumb-accommodation__image">
        <span>image</span>
      </div>
      <div class="thumb-accommodation__content">
        <h3>
          A realy realy realy realy realy realy realy realy big Title
        </h3>
        <p>
          Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor....
        </p>
      </div>
    </div>
  </div>

  <div class="col-6">
    <div class="thumb-accommodation">
      <div class="thumb-accommodation__image">
        <span>image</span>
      </div>
      <div class="thumb-accommodation__content">
        <h3>
          Title
        </h3>
        <p>
          Lorem ipsum dolor....
        </p>
      </div>
    </div>
  </div>
</div>

Answer 1

使用 display: -webkit-flex; 代替 display: -webkit-box; 并删除 flex-wrap: wrap;

.row {
  display: flex;
  display: -ms-flex;
  display: -webkit-flex;
}

.row {
  display: flex;
  display: -ms-flex;
  display: -webkit-flex;
}

.col-6 {
  -webkit-flex: 0;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
  padding-left: 15px;
  padding-right: 15px;
  width: 100%;
}

.thumb-accommodation {
  height: 100%;
}

.thumb-accommodation__image {
  height: 120px;
  background-color: deeppink;
  color: white;
  padding: 10px;
}

.thumb-accommodation__content {
  background-color: aqua;
  height: calc(100% - 120px);
  padding: 10px;
}

h3 {
  margin: 0
}

<div class="row">

  <div class="col-6">
    <div class="thumb-accommodation">
      <div class="thumb-accommodation__image">
        <span>image</span>
      </div>
      <div class="thumb-accommodation__content">
        <h3>
          A realy realy realy realy realy realy realy realy big Title
        </h3>
        <p>
          Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor....
        </p>
      </div>
    </div>
  </div>

  <div class="col-6">
    <div class="thumb-accommodation">
      <div class="thumb-accommodation__image">
        <span>image</span>
      </div>
      <div class="thumb-accommodation__content">
        <h3>
          Title
        </h3>
        <p>
          Lorem ipsum dolor....
        </p>
      </div>
    </div>
  </div>

</div>

Answer 2

您可以使用此 jquery 代码来制作相同的高度

$(document).ready(function(){
 var heightBox =  0;
 $('.thumb-accommodation__content').each(function(){
 if($(this).height()>heightBox){
  heightBox=$(this).height();
  }
 });
 $('.thumb-accommodation__content').height(heightBox);
});

.row {
  display: flex;
  display: -ms-flexbox;
  display: -webkit-box;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
}

.col-6 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
  padding-left: 15px;
  padding-right: 15px;
  width: 100%;
}

.thumb-accommodation {
  height: 100%;
}

.thumb-accommodation__image {
  height: 120px;
  background-color: deeppink;
  color: white;
  padding: 10px;
}

.thumb-accommodation__content {
  background-color: aqua;
  height: calc(100% - 120px);
  padding: 10px;
}

h3 {
  margin: 0
}

<div class="row">
  <div class="col-6">
    <div class="thumb-accommodation">
      <div class="thumb-accommodation__image">
        <span>image</span>
      </div>
      <div class="thumb-accommodation__content">
        <h3>
          A realy realy realy realy realy realy realy realy big Title
        </h3>
        <p>
          Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor....
        </p>
      </div>
    </div>
  </div>

  <div class="col-6">
    <div class="thumb-accommodation">
      <div class="thumb-accommodation__image">
        <span>image</span>
      </div>
      <div class="thumb-accommodation__content">
        <h3>
          Title
        </h3>
        <p>
          Lorem ipsum dolor....
        </p>
      </div>
    </div>
  </div>
</div>

    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

100% 高度 child 不适合 non-Chrome 浏览器中的 flex parent

100% height child doesn't fit the flex parent in non-Chrome browsers

twitter-bootstrap

css

flexbox

twitter-bootstrap-4