1

I have a element with class row and three col elements right after it. Right now, all col elements assume the height of the largest col.

I would like to restrict the column heights instead to that of a smaller column such that,

  • This column, #colB, has a minimum height, but can be made bigger
  • The other two columns should overflow-y: scroll if they exceed the height of #colB.

Is there a good way to do this using Bootstrap 4 utilities?

Example js-fiddle here:

https://jsfiddle.net/fwtpeq43/4/

user1834200
  • 152
  • 1
  • 13
  • See this: http://stackoverflow.com/questions/35387368/setting-equal-height-for-divs-with-flexboxdepending-on-the-shortest-one – Carol Skelly Apr 11 '17 at 09:51

2 Answers2

3

If you're okay with having a pre-defined height, you can set the height of the row and then the subsequent divs will overflow if they are taller than that height.

Otherwise, you'll have to use JavaScript to compare the heights of each of the divs, select the smallest one, and then set the height directly on the row element.

.row { height: 50vh; }
Christian Hain
  • 619
  • 4
  • 11
  • I've edited my post to be a little bit clearer, but basically what you're saying is there isn't really a way to restrict columns to the height of a specific sibling? – user1834200 Apr 11 '17 at 04:48
  • 1
    Not with CSS alone. You'll either need a predefined height or javascript's help – Christian Hain Apr 12 '17 at 05:50
0

You can use javascript or jQuery on page load to get colB height and the update colA and colC height based on that.

I have attached JSFiddle

OR

Copy and paste this code just above your </body>

<script>
  temp = $('#colB').height();
  console.log(temp);
  document.getElementById('colA').setAttribute("style","height:"+temp+"px");
  document.getElementById('colC').setAttribute("style","height:"+temp+"px"); 
</script>
Sagar Panchal
  • 73
  • 5