Bootstrap 4 grid columns not assuming max height

Question

I am using Bootstrap 4 to construct a grid of rows and columns. Mostly everything is laid out as I like it, except for the 3 columns on the bottom left area, which I cannot get to automatically grow to the maximum height of the row they are place within. I have added a border to every row and column for demonstration, and I've added a blue background to the columns that will not automatically resize to the full possible height. I've tried everything I can think of, and can't quite get the columns to automatically grow to the full height.

I will normally have charts.js charts in the 3 columns, and when they don't grow to fill the entire height of the column, the charts get squished and look bad. Any help would be extremely appreciated!

I've constructed a (hopefully) full codepen example here:

https://codepen.io/coldcoffeecup/pen/aGgpoV

Obsidian Age · Accepted Answer

While Bootstrap's row comes with display: flex, unfortunately the columns do not. As such, if you simply want to make the blue squares expand to fill the full vertical space, all you need to do is add the following CSS:

#A {
  display: flex;
  flex-direction: column;
}

This can be seen working here.

.hovereffect {
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
}

.hovereffect .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out
}

.hovereffect img {
  display: block;
  position: relative;
  -webkit-transition: all .4s linear;
  transition: all .4s linear;
}

.hovereffect h2 {
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  position: relative;
  font-size: 17px;
  background: rgba(0, 0, 0, 0.6);
  -webkit-transform: translatey(-100px);
  -ms-transform: translatey(-100px);
  transform: translatey(-100px);
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  padding: 10px;
}

.hovereffect a.info {
  text-decoration: none;
  display: inline-block;
  text-transform: uppercase;
  color: #fff;
  border: 1px solid #fff;
  background-color: transparent;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  margin: 50px 0 0;
  padding: 7px 14px;
}

.hovereffect a.info:hover {
  box-shadow: 0 0 5px #fff;
}

.hovereffect:hover img {
  -ms-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

.hovereffect:hover .overlay {
  opacity: 1;
  filter: alpha(opacity=100);
}

.hovereffect:hover h2,
.hovereffect:hover a.info {
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-transform: translatey(0);
  -webkit-transform: translatey(0);
  transform: translatey(0);
}

.hovereffect:hover a.info {
  -webkit-transition-delay: .2s;
  transition-delay: .2s;
}

.fullwidth {
  width: 100% !important;
}

.fullheight {
  height: 100% !important;
}

#A {
  display: flex;
  flex-direction: column;
}




  
  
  
  
  

  Template
  
  

  
  
  



  
    Dashboard
    

    
      
        
          Dropdown
          
            Action
            Another action
            Something else here
          
        
      
      
        
        
          
          
        
      
    
  

  
    
      Title
    

    
      
        
          
            
              
                
                  
                  
                    A
                    B
                    C
                  
                
              
              
                
                  
                    Slide 1
                  
                
                
              
              
                
                  
                    Slide 2
                  
                
                
              
              
                
                  
                    Slide 3
                  
                
                
              
            
            
              A4
            
          
          
            
              
            
            
              
            
            
              
            
          
        
        
          
            
              
                A
                
                                    
                                
              
              
                B
                
                                    
                                
              
              
                C
                
                                    
                                
              
              
                D
                
                                    
                                
              
              
                E
                
                                    
                                
              
              
                F
                
                                    
                                
              
              
                G
                
                                    
                                
              
              
                H
                
                                    
                                
              
            
          
          
            
              
              
                
              
            
          
          
            
              
                I
                
              
              
                J
                
              
              
                K

Bootstrap 4 grid columns not assuming max height

Answers (1)

Related Questions