chrome

Question

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

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

这是一个演示此问题的代码段。如果您在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%。

例如，下面的代码段似乎适用于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

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

 -webkit-align-items: flex-start;