Equal height sections within flexbox columns?

Question

I\'m using flexbox columns for a pretty basic layout. There is a header, image and a list below. List must have a border and can have varying contents. Is it possible to hav

Answer 1

Since both columns are inside the same flex container, yes, the list boxes can be the same height (based on the tallest content) using only CSS.

.columns {
  display: flex;
}

.col {  
  display: flex;          /* new */
  flex-direction: column; /* new */
  margin-left: 20px;
}

.list {
  flex: 1;                /* new */
  padding: 24px;
  border: 1px solid blue;
}

ul {
  margin: 0;
}

  

    
Header
    

      

        
List item
        
List item
      
    
  
  

    
Header
    

      

        
List item
        
List item
        
List item
        
List item
      
    
  

Here are a few more examples:

jsFiddle demo

.columns {
  display: flex;
}

.col {
  display: flex;           /* new */
  flex-direction: column;  /* new */
  margin-left: 20px;
}

.list {
  flex: 1;                 /* new */
  padding: 24px;
  border: 1px solid blue;
}

ul {
  margin: 0;
}

  

    
Header
    

      

        
List item
        
List item
      
    
  
  

    
Header
    

      

        
List item
        
List item
        
List item
        
List item
      
    
  






  

    
Header
    

      

        
List item
        
List item
      
    
  
  

    
Header
    

      

        
List item
        
List item
        
List item
        
List item
        
List item
        
List item
        
List item
        
List item
      
    
  






  

    
Header
    

      

        
List item
        
List item
        
List item
        
List item
        
List item
        
List item
        
List item
        
List item
        
      
    
  
  

    
Header
    

      

        
List item
        
List item