Make flex items have equal width in a row

Question

If you look at the example below, I want the headers (h4.child-title) to have the same length within the parent container.

But I\'m not successful in ac

Answer 1

Several times in your code, you wrote claas instead of class:

  
Title
  

Then you should simplify your html structure by removing the vertical-separator divs and using css borders instead:

.top-level {
  display: flex;
  flex-flow: row wrap;
}

.section {
  display: flex;
  flex-flow: row nowrap;
  border: 1px solid;
  margin-right: 12px;
  margin-top: 12px;
}

.section-child {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  flex: 1 1 0;
}

.section-child:not(:last-of-type) {
  margin: 8px 0;
  border-right: solid 1px rgba(0, 0, 0, 0.3);
}

.child-title {
  white-space: wrap;
}

  

    

      
Title
      
    
    

      
Longer title
      
    
    

      
Much much longer title
      
    
  
  

    

      
Title
      
    
    

      
Longer title
      
    
    

      
Much much longer title
      
    
  
  

    

      
Title
      
    
    

      
Longer title
      
    
    

      
Much much longer title
      
    
  

I removed the white-space: nowrap for .child-title because flex values are just hints and without wrapping "Much much longer title" will take too much space. If you really want to use nowrap, you will have to ensure your container is large enough and maybe use overflow.