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

Posted 2023-03-05

【中文标题】flex项目中的最小高度在chrome中被忽略[重复]

【英文标题】：min-height inside a flex item is being ignored in chrome [duplicate]

【发布时间】：2016-11-12 13:30:48

【问题描述】：

我有一个带有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>

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

【参考方案1】：

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

 -webkit-align-items: flex-start;

【讨论】：

我很困惑这将如何解决问题。我尝试实施（我的解释）这个答案无济于事。您能否在答案中添加一个可执行代码 sn-p 来演示解决方案？

对不起，我在手机上不能放，你可以试试看结果

w3schools.com/css/css3_flexbox.asp