在Chrome浏览器显示中：flex无效

Question

以下div不伸展，因此垂直线的高度不会增加。

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

以下相同的代码在IE和FF中正常工作，但在chrome中没有。

＆＃13;

＆＃13;

@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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

你能否建议在哪里修理它。

Answer 1

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

＆＃13;

＆＃13;

@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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;