具有最小高度的 Flexbox 行在 IE 中不会拉伸答案

【问题标题】：Flexbox row with min-height does not stretch in IE具有最小高度的 Flexbox 行在 IE 中不会拉伸
【发布时间】：2019-12-13 19:19:40
【问题描述】：

我有一个有两行和最小高度的 flexbox。右边的行有另一个 flex 有 2 列，中间有 justify-content 空间。

它在 Chrome 中运行良好，但在 IE 中无法填充最小高度。关于它有很多问题，但没有一个对我有用。请注意，我有不同的风格，其中图像位于顶部、底部或右侧。我需要在 IE 中同时展开内容和图像以填充整个卡片。

这里是代码。

.card-wrap {
  display: block;
  position: relative;
}

a {
    display: block;
}

.card-image-left {
    flex-direction: row;
}

.card {
    box-sizing: border-box;
    display: flex;
    border: 1px solid black;
    min-height: 200px;
}

.card-content {
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
}

.card-text {
    font-size: 0.875rem;
    color: #1D1D1D;
}

.card-footer {
    margin-top: 12px;
}

.card-image-wrap {
  overflow: hidden;
  position: relative;
}

h3 {
    font-size: 1.25rem;
    font-weight: 500;
    margin: 0 0 4px 0;
}

.card-image {
  width: 100%;
  background-size: cover;
  width:80px;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-image: url("https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg");
}

<div class='card-wrap'>
  <a href='#'>
    <div class='card card-image-left'>
      <div class='image-wrap'>
        <div class='card-image'>
        </div>
      </div>
      <div class='card-content'>
        <div class='card-header'>
          <h3>test title</h3>
          <div class='card-text'>test subtitlte</div>
        </div>
        <div class='card-footer'>
          <div>
            <div class='card-footer-monetary'>1000</div>
          </div>
        </div>
      </div>
    </div>
  </a>
</div>

图片来自 IE

【问题讨论】：

标签： html css internet-explorer flexbox

【解决方案1】：

这是 IE 10-11 中的一个错误。在 IE 10-11 中，弹性容器上的 min-height 声明可用于确定容器本身的大小，但它们的弹性项目子项似乎不知道其父项的大小。它们的行为就好像根本没有设置高度一样。

解决方法 只需将 flex 容器（这里是类名 card 的 div）与另一个具有 flex 方向列的 flex-container 包装起来

.ie-fix-wrapper{
  display: flex;
  flex-direction:column;
 }

.card-wrap {
  display: block;
  position: relative;
}

a {
    display: block;
}

.card-image-left {
    flex-direction: row;
}

.card {
    box-sizing: border-box;
    display: flex;
    border: 1px solid black;
    min-height: 200px;
}

.card-content {
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
}

.card-text {
    font-size: 0.875rem;
    color: #1D1D1D;
}

.card-footer {
    margin-top: 12px;
}

.card-image-wrap {
  overflow: hidden;
  position: relative;
}

h3 {
    font-size: 1.25rem;
    font-weight: 500;
    margin: 0 0 4px 0;
}

.card-image {
  width: 100%;
  background-size: cover;
  width:80px;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-image: url("https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg");
}

<div class='card-wrap'>
  <a href='#'>
   <div class="ie-fix-wrapper">
    <div class='card card-image-left'>
      <div class='image-wrap'>
        <div class='card-image'>
        </div>
      </div>
      <div class='card-content'>
        <div class='card-header'>
          <h3>test title</h3>
          <div class='card-text'>test subtitlte</div>
        </div>
        <div class='card-footer'>
          <div>
            <div class='card-footer-monetary'>1000</div>
          </div>
        </div>
      </div>
    </div>
   </div>
  </a>
</div>

【讨论】：

【解决方案2】：

@Soothran 提供的解决方案效果很好。还有一种替代解决方案实施起来更快 - 在子级中继承 min-height。在上面的代码的这种情况下：

.image-wrap {
  min-height: inherit;
}

.card-content {
    min-height: inherit;
}

.card-wrap {
  display: block;
  position: relative;
}

a {
    display: block;
}

.card-image-left {
    flex-direction: row;
}

.card {
    box-sizing: border-box;
    display: flex;
    border: 1px solid black;
    min-height: 200px;
}

.card-content {
    min-height: inherit;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
}

.card-text {
    font-size: 0.875rem;
    color: #1D1D1D;
}

.card-footer {
    margin-top: 12px;
}

.card-image-wrap {
  overflow: hidden;
  position: relative;
}

h3 {
    font-size: 1.25rem;
    font-weight: 500;
    margin: 0 0 4px 0;
}

.image-wrap {
  min-height: inherit;
}

.card-image {
  width: 100%;
  width:80px;
  height: 100%;
  background: black;
}

<div class='card-wrap'>
  <a href='#'>
    <div class='card card-image-left'>
      <div class='image-wrap'>
        <div class='card-image'>
        </div>
      </div>
      <div class='card-content'>
        <div class='card-header'>
          <h3>test title</h3>
          <div class='card-text'>test subtitlte</div>
        </div>
        <div class='card-footer'>
          <div>
            <div class='card-footer-monetary'>1000</div>
          </div>
        </div>
      </div>
    </div>
  </a>
</div>

【讨论】：

【解决方案3】：

您需要将任何 flex-direction:column 包装在 flex-direction:row 中（或者只是 display:flex 简单）

【讨论】：

请将此添加为评论，而不是作为答案。