flex项目中的最小高度在chrome中被忽略[重复]

Question

我有一个带有flex-direction: row 和一些弹性项目的弹性容器。弹性项目本身会有不同的高度，但是由于默认的align-items: stretch，它们都填充了弹性容器的高度。在我的特定用例中，这是完美的。

问题是我在每个 flex 容器中都有这些 <div>s，我需要它们占据其父容器的全部高度。我想我可以在他们身上设置min-height: 100%。此解决方案适用于 Firefox 和 Internet Explorer，但由于某种原因不适用于 Google Chrome。

这是一个演示问题的代码 sn-p。如果您在 chrome 上查看此内容，您会发现较短的白色 .card 没有填满紫色 .card_container。但是，如果您在 IE 或 FF 上查看此内容，它将填满父容器的高度。

#grid {
  background: rgba(255,0,0,0.2);
  padding: 10px;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;      
}

.card_container {
  width: 300px; 
  background: rgba(0,0,255,0.2);
  margin: 15px;
  padding: 5px;
}


.card {
  background: white;
  min-height: 100%;    /* <- Why isn't this working? */
}

<div id="grid">
  <div class="card_container">
    <div class="card">
      This text is very short.
    </div>
  </div>
  <div class="card_container">
    <div class="card">
      This text is very long. 
      This text is very long. 
      This text is very long. 
      This text is very long. 
      This text is very long. 
      This text is very long. 
      This text is very long. 
      This text is very long. 
      This text is very long. 
      This text is very long. 
    </div>
  </div>
</div>

我发现的一个解决方法是将.card_container 也设为弹性容器，并将.card 显式设置为width: 100%。

例如，下面的 sn-p 似乎可以在 Chrome、FF 和 IE 中工作：

#grid {
  background: rgba(255,0,0,0.2);
  padding: 10px;

  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
   
}

.card_container {
  width: 300px;
  background: rgba(0,0,255,0.2);
  margin: 15px;
  padding: 5px;
  
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}


.card {
  width: 100%;
  background: white;
}

<div id="grid">
  <div class="card_container">
    <div class="card">
      This text is very short.
    </div>
  </div>
  <div class="card_container">
    <div class="card">
      This text is very long. 
      This text is very long. 
      This text is very long. 
      This text is very long. 
      This text is very long. 
      This text is very long. 
      This text is very long. 
      This text is very long. 
      This text is very long. 
      This text is very long. 
    </div>
  </div>
</div>

我想知道为什么这个解决方法是必要的。我做错了什么还是这是一个错误？有谁知道它是否记录在任何地方？

Answer 1

不要在弹性项目中使用空格。 在弹性容器中设置

 -webkit-align-items: flex-start;