Flexbox - IE 中元素的高度不正确答案

【问题标题】：Flexbox - incorrect height of element in IEFlexbox - IE 中元素的高度不正确
【发布时间】：2014-09-11 23:57:00
【问题描述】：

当我们使用 Chrome 并调整窗口大小以使视频的大小小于其实际宽度时，带有项目的“日志”框始终附着在视频的底部，而在 IE 中，它会在视频变大时跟随它，尽管当它的大小变得小于其自然宽度 - 视频上方和下方出现两个黑条.. 有没有办法删除它们？

如果我们将“显示”设置为块或内联块，则不会发生这种情况，但由于项目的性质（这只是一个简化的情况），我无法将显示更改为“flex”以外的任何内容。是否有任何 CSS 调整？

 #content {
  display: inline-block;
  ...
 }

如果可能的话，我还想避免添加设置高度的 JS - 它在 Chrome、Safari、Opera 和 Firefox 中运行良好（使用不同的视频）只是在 IE 中出现问题。谢谢大家！

【问题讨论】：

【解决方案1】：

好的，我刚刚找到了一个可行的 CSS 解决方案，看起来在视频加载后 IE 将默认最小高度设置为原始视频的高度，但如果我们用不同的像素值覆盖它，任何东西都非常小，假设 1px - 那么它工作正常。

#video {
  width: 100%;
  height: auto;        
  min-height: 1px;
}

【讨论】：