在 Chrome 浏览器中显示：flex 被忽略答案

【问题标题】：display:flex ignored in Chrome browser在 Chrome 浏览器中显示：flex 被忽略
【发布时间】：2016-01-07 09:11:52
【问题描述】：

下面的 div 没有被拉伸，所以垂直线没有增加高度。

<div style="border-left: thick solid #000;margin-left:20px; height:100%;">
    Test2
</div>

遵循相同的代码在 IE 和 FF 中可以正常工作，但在 Chrome 中则不行。

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');

.row-eq-height {
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
}

<div class="row row-eq-height" style="backgroud:pink">
  <div class="col-md-12" style="background:yellow"> 
    Test1<br />
    Test1<br />
    Test1<br />
    Test1
  </div>
  <div class="col-md-2" style="background:red">         
    <div style="border-left: thick solid #000;margin-left:20px; height:100%;">
      Test2
    </div>
  </div>
</div>

有解决这个问题的想法吗？

【问题讨论】：

也许：stackoverflow.com/questions/7676022/…
this 是您的 sn-p 在 Windows 上的 Chrome (v79.0.3945.117) 中呈现的方式。你用的是什么版本？
@TAO 这个帖子是 2015 年的，可能早在 2015 年，Chrome 的渲染就出现了问题
@tab，我在列表顶部看到它，因为您在 2 小时前对其进行了修改。您为什么要对过时（因此不相关）的内容进行“语言更正”？
@tao 好问题！ Stackoverflow 政策（或者至少是我理解的最好的政策）与其说是个人问答平台，不如说是常见问题有经过时间证明的答案的地方。我个人已经为我的 VB6 问题找到了很多答案（尽管很荒谬），而且很多都过时了。现在我实际上编辑（或者在许多无法修复的情况下，标记为离题）这些家伙的问题（我发现这个家伙正在编辑 VB6 问题），因为很多都写得不好。谁知道这些是否有一天会派上用场：P

标签： html css twitter-bootstrap flexbox

【解决方案1】：

试试这个。 Chrome 似乎更具体一些。

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');

.row-eq-height, .col-md-2 {
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
}

.col-md-2 {
    flex-flow: column nowrap;
}

.col-md-2 > div {
    flex: 1;
}

<div class="row row-eq-height" style="backgroud:pink">
    <div class="col-md-10" style="background:yellow"> 
        Test1<br />
        Test1<br />
        Test1<br />
        Test1
    </div>
    <div class="col-md-2" style="background:red">         
        <div style="border-left: thick solid #000;margin-left:20px; height:100%;">
            Test2
        </div>
    </div>
</div>

【讨论】：

在 IE10 中出现问题，它会走出可见区域并在浏览器中显示水平滚动条
对答案进行了编辑。黄色 div 上的 col-md-* 类设置为 12。这不起作用。 Bootstrap 最大列数为 12，width 值为 100%。这就是为什么红色 div 在 IE10 中超出了可见区域的原因。
右侧显示在桌面而不是平板，这就是为什么它被赋予12。所以当它处于平板模式时它会考虑整个区域。
哦，好的。但是你不需要这样做。这就是 hidden-* 和 visible-* 实用程序类的用途。阅读Responsive utilities。这样您就可以通过媒体查询轻松地提供移动友好的视图。将此与 wright col-* 课程结合起来将使您的生活更轻松。 ;-)
当没有数据时，有时右侧窗格不可见。所以这就是为什么它不会工作 col-md-10。此时它不会占据整个区域。 :(