0

I have a problem with equal height cols/boxes in bootstrap in combination with nested colored divs. Have a look here how it looks like: https://www.dropbox.com/s/ko6zmqwup4wgasb/bootstrap-equal-height-cols.jpg?dl=0

Actually to set cols to equal heights isn't that problem with flex boxes anymore. The difficulties I encountered is the set it up for the proper look. The bootstrap cols can't have the colored background due to their setup with margins and paddings. Because I have 2 divs within the row wrapper it seems to be difficult to fix this problem. The reduced HTML code:

<div class="row row-eq-height">
  <div class="col-sm-6 col-md-4">
    <div class="portfolio-el bg-dark-gray">
      <div class="view"> 
        <img src="images/image_360x180_1.jpg" alt="dummy">
      </div>
    <div class="portfolio-text-content">
      here goes text which causes different heights of those boxes...
    </div>
  </div>
</div>
<div class="col-sm-6 col-md-4">
  <div class="portfolio-el bg-dark-gray">
    <div class="view"> 
      <img src="images/image_360x180_2.jpg" alt="dummy">
    </div>
    <div class="portfolio-text-content">
      here goes text which causes different heights of those boxes...
    </div>
  </div>
  <div class="col-sm-6 col-md-4">
  <div class="portfolio-el bg-dark-gray">
    <div class="view"> 
      <img src="images/image_360x180_3.jpg" alt="dummy">
    </div>
    <div class="portfolio-text-content">
      here goes text which causes different heights of those boxes...
    </div>
  </div>
</div><!-- end row -->

CSS:

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}
.bg-dark-gray {
    background: #efefef;    
}

all the rest is done by bootstrap classes > grid, etc. I have seen examples giving the cols flex: 1, but I need a height of 100% for the divs with the gray background. Any ideas or workarounds? Cheers

Toccamonium
  • 61
  • 1
  • 1
  • 5
  • Assuming I understand your question correctly, which is to get the content boxes to stretch the container height, you need to create nested flexboxes. For details see my answers [**here**](http://stackoverflow.com/a/33272824/3597276) and [**here**](http://stackoverflow.com/a/33457515/3597276). – Michael Benjamin Nov 04 '15 at 00:14
  • Your html is unbalanced, your missing two `` tags. – woestijnrog Nov 04 '15 at 00:19
  • @Michael_B thanks for you links, that helped me almost out. The nested flexbox stuff is working so far... in Chrome. In Firefox it's somehow buggy. The nested div with text is showing properly but as you can see in the image, the text of second and third box has been dropped out of the visible area. In IE edge no text at all is showing. Any ideas why? [link]https://www.dropbox.com/s/qrl85nk7xqph6gl/firefox-nested-flexbox-problem.jpg?dl=0 – Toccamonium Nov 05 '15 at 21:09
  • Without seeing the code I could only guess. Why don't you recreate the problem on jsfiddle.net, then post the code and a link to the fiddle demo in the question. – Michael Benjamin Nov 05 '15 at 21:13
  • @Michael_B I thought I had it fixed but that was only because of identical text lenght in the boxes. Therefore I made a codepen example for you: http://codepen.io/toccamonium/pen/bVxXrR maybe you can figure out something? Cheers – Toccamonium Nov 06 '15 at 15:17

0 Answers0