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

Question

我有一个有两行和最小高度的 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

标签： htmlcssinternet-explorerflexbox

Answer 1

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

更多信息：https ://github.com/philipwalton/flexbugs#flexbug-3

解决方法 只需将 flex 容器（这里是 div 与 classname card）与另一个具有 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>