display:flex ignored in Chrome browser

Question

The following div is not stretching, so vertical line is not increase in height.

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

Following same code works fine in IE and FF, but not in 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>

Any ideas on to fix this?

Maybe: http://stackoverflow.com/questions/7676022/html5-flexible-box-model-height-calculation/15388247#15388247 — epascarello, Oct 09 '15 at 12:15
[this](https://i.stack.imgur.com/EQmzC.png) is how your snippet renders in Chrome (v79.0.3945.117), on Windows. What version are you using? — tao, Jan 08 '20 at 08:28
@TAO this post is from 2015, possibly back in 2015 there were problems with rendering in Chrome — TAbdiukov, Jan 08 '20 at 09:44
@tab, I saw it at the top of my list as you modified it 2 hours ago. Why are you doing *"linguistic corrections"* to obsolete (hence irrelevant) content? — tao, Jan 08 '20 at 10:27
@tao Good question! The Stackoverflow policy (or at least the best I understand it) is not so much to be the the individual-question-answering platform, but more of the place where common questions have time-proven answers. I personally had found many answers to (as absurd as it is) my VB6 questions, and many are dated. Right now I actually edit (or in many un-fixable cases, mark as off-topic) this guys questions (I found this guy editing VB6 questions) since many are written badly. Who knows if these will come in handy to someone someday :P — TAbdiukov, Jan 08 '20 at 10:35

DavidDomain · Answer 1 · 2015-11-05T15:16:38.323

0

Give this a try. Chrome seems to be a bit more specific.

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

edited Nov 05 '15 at 15:16

answered Oct 09 '15 at 12:21

DavidDomain

14,976
4
42
50

Having issue in IE10 it goes out the visible area and shows horizontal scroll bar in a browser – Furqan Misarwala Nov 05 '15 at 13:02
Made an edit to the answer. Your `col-md-*` class on the yellow div was set to 12. This will not work. Bootstrap maximum col number is 12 and has a `width` value of `100%`. That's why the red div went out of the visible area in IE10. – DavidDomain Nov 05 '15 at 15:20
Right side is displayed in desktop and not in tablet, that's why it has been give 12. So when it is in tablet mode it will consider the whole area . – Furqan Misarwala Nov 05 '15 at 15:24
Oh, OK. But you don't need to do that this way. This is what `hidden-*` and `visible-*` utility classes are for. Read [**Responsive utilities**](http://getbootstrap.com/css/#responsive-utilities). That way you can easily provide mobile friendly views via media-queries. Combining this with the wright `col-*` class will make your life easier. ;-) – DavidDomain Nov 05 '15 at 15:43
Also sometime that right pane is not visible when there is no data. so that's why It will not work col-md-10. At this time it will not occupy whole area. :( – Furqan Misarwala Nov 07 '15 at 04:49

display:flex ignored in Chrome browser

1 Answers1