语义 UI 卡高度问题（Windows 上的 chrome）答案

【问题标题】：Semantic UI cards height issue (chrome on windows)语义 UI 卡高度问题（Windows 上的 chrome）
【发布时间】：2016-02-01 22:10:05
【问题描述】：

我在 chrome for windows 上遇到问题，我的 .card 项目似乎没有得到正确的高度。他们得到太多或太少导致您可以在下面的屏幕截图中看到的问题。据我所知，这只发生在 Chrome for Windows 上。

没有发生此问题的平台：

Internet Explorer 11
微软边缘
火狐
Mac 上的 Chrome

JSFiddle

<div class="ui grid stackable container">
  <div class="sixteen wide column">
    <div class="ui link five doubling cards">
      <a class="ui card" href="#">
        <div class="image">
          <img src="http://assets19.pokemon.com/assets/cms2/img/pokedex/full//002.png">
        </div>

        <div class="content">
          <div class="header">Ivysaur</div>
          <div class="meta">Grass</div>
          <div class="description">

          </div>
        </div>
        <div class="extra content">
          <span><i class="idea icon"></i>Pokemon</span>
        </div>
      </a>
      <a class="ui card" href="#">
        <div class="image">
          <img src="http://assets19.pokemon.com/assets/cms2/img/pokedex/full//004.png">
        </div>

        <div class="content">
          <div class="header">Charmander</div>
          <div class="meta">Fire</div>
          <div class="description">

          </div>
        </div>
        <div class="extra content">
          <span><i class="idea icon"></i>Pokemon</span>
        </div>
      </a>

      ...

    </div>
  </div>
</div>

【问题讨论】：

请把这个添加到小提琴中。此处没有可调试的 scss/css。
@JamiePaterson 添加了
这里的一切看起来都一样。在Chrome for Windows上测试，和FF、IE11等一样
@Michael_B 这似乎是某种 chrome 错误，不容易重现。我会调查的

标签： css google-chrome flexbox semantic-ui

【解决方案1】：

我在my website 之一的生产中遇到了同样的问题。如果图像不在缓存中并且必须在最近更新后仅在 Chrome 上下载，则会出现该错误。

我发现一个提交是关于语义 UI 用来制作卡片的 css-flex。这个bug report 详细说明了问题和一些解决方法。
我选择将min-height: 0; 添加到我的卡片内容中，它按应有的方式工作。

【讨论】：