Shorter divs within a grid to fill remaining vertical space + align list element to bottom

Question

I have a grid which will be used to display products. Some titles and descriptions will be longer than others so I need to keep all the divs the same height for consistent styling. I've done this using display: flex.

That works quite well but I need to align the last child of each item to the bottom of it's parent. The last child is a button so it would look better if they were all lined up.

The issue I'm having is I have quite a few divs around the content and I don't want to add flexbox to all of that - I'm assuming that shouldn't be necessary but I'm no expert.

The highest level parents are all the same height. The next child wasn't but I think I've managed to resolve that by setting height: 100%. So the next problem is getting mosaic__caption to fill the space and with it the .btn to the bottom.

Here's my CodePen: https://codepen.io/moy/pen/JLBOyE

The first item is the one I've added more text to to make it taller and I've added opaque red backgrounds to the parents divs so we can see what is 100% and what isn't.

Any ideas?

/**
 * Clearfix
 */
/**
 * Typography
 */
/**
 * Media Queries.
 * 
 * 1. $bp2  =  480px 	(30rem)
 * 2. $bp3  =  600px 	(37.5rem)
 * 3. $bp4  =  768px 	(48rem)
 * 4. $bp5  =  1024px 	(64rem)
 * 5. $bp6  =  1220px 	(76.250rem)
 * 6. $bp7  =  1400px 	(87.5rem)
 */
/**
 * Base
 */
/**
 * Colours
 */
/**
 * Spacing
 */
.mosaic {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  list-style: none;
  margin: 0 0 30px -15px;
  padding: 0;
  /* [1] */
  /* [2] */
  /* [3] */
  /* [4] */
  /* [5] */
  /* [6] */
}
.mosaic:before, .mosaic:after {
  content: "";
  display: table;
}
.mosaic:after {
  clear: both;
}
.mosaic:before, .mosaic:after {
  content: normal;
  /* [1] */
}
@media (min-width: 48em) {
  .mosaic {
    margin-left: -30px;
  }
}

.mosaic__item {
  background: none;
  background: rgba(255, 0, 0, 0.1);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: block;
  margin-bottom: 0;
  padding-left: -15px;
  position: relative;
  width: 50%;
  /* [1] */
  /* [2] */
  /* [3] */
  /* [4] */
  /* [5] */
  /* [6] */
  /* [1] */
  /* [2] */
  /* [3] */
  /* [4] */
  /* [5] */
  /* [6] */
}
@media (min-width: 48em) {
  .mosaic__item {
    float: left;
    padding-left: 30px;
    width: 50%;
  }
  .mosaic__item:nth-child(odd) {
    clear: left;
  }
}
@media (min-width: 87.5em) {
  .mosaic__item {
    width: 33.33333%;
  }
  .mosaic__item:nth-child(odd) {
    clear: none;
  }
  .mosaic__item:nth-child(3n+1) {
    clear: left;
  }
}

.mosaic__wrap {
  background: rgba(255, 0, 0, 0.1);
  height: 100%;
  position: relative;
}

.mosaic__link {
  background: white;
  border-bottom: none;
  display: block;
  font-weight: 400;
  height: 100%;
  padding: 0;
  -webkit-transition: all .25s;
  transition: all .25s;
  text-shadow: none;
}
.mosaic__link:hover {
  background-color: #94121f;
}

.mosaic__image-wrap {
  background-image: none;
  display: block;
  overflow: hidden;
  padding: 0;
  text-shadow: none;
}

.mosaic__image {
  display: block;
  -webkit-transition: all .25s ease-out;
  transition: all .25s ease-out;
  width: 100%;
  max-width: 100%;
  -webkit-backface-visibility: hidden;
}
.mosaic__item:hover .mosaic__image {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}

.mosaic__caption {
  background: rgba(255, 0, 0, 0.1);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #778586;
  display: block;
  overflow: hidden;
  padding: 15px 15px;
  text-align: center;
  -webkit-transition: all .25s;
  transition: all .25s;
  /* [1] */
  /* [2] */
  /* [3] */
  /* [4] */
  /* [5] */
  /* [6] */
}
.mosaic__link:hover .mosaic__caption {
  color: #fbdde0;
}
@media (min-width: 48em) {
  .mosaic__caption {
    padding: 30px 30px;
  }
}
.mosaic__caption .btn {
  margin-top: auto;
}

.mosaic__title {
  color: #0e1010;
  font-size: 15px;
  font-size: 1.5rem;
  margin-bottom: 7.5px;
  -webkit-transition: all .20s;
  transition: all .20s;
  /* [1] */
  /* [2] */
  /* [3] */
  /* [4] */
  /* [5] */
  /* [6] */
}
.h-product .mosaic__title {
  margin-bottom: 0;
}
.mosaic__title a {
  background-image: none;
  font-weight: 700;
  text-shadow: none;
}
@media (min-width: 37.5em) {
  .mosaic__title {
    font-size: 20px;
    font-size: 2rem;
  }
}
.mosaic__link:hover .mosaic__title {
  color: white;
}

.mosaic__desc {
  margin-bottom: 7.5px;
}

.mosaic__value {
  margin-bottom: 15px;
}
.mosaic__value .p-price {
  color: #0e1010;
  font-weight: 700;
  margin-left: 5px;
}

.mosaic__review {
  margin-bottom: 0;
}


	
		
			
				
			
			
				Special Offer
				Name of Product that is really, really, really long
				A long description to add more height to product
				
					
			            3 Star rating here
					
	            
				£4.95 £4.05
				Add to Cart
			
		
	
	
		
			
				
			
			
				Special Offer
				Name of Product
				A short description
				
					
			            3 Star rating here
					
	            
				£4.95 £4.05
				Add to Cart
			
		
	
	
		
			
				
			
			
				Special Offer
				Name of Product
				A short description
				
					
			            3 Star rating here
					
	            
				£4.95 £4.05
				Add to Cart
			
		
	
	
		
			
				
			
			
				Special Offer
				Name of Product
				A short description
				
					
			            3 Star rating here
					
	            
				£4.95 £4.05
				Add to Cart
			
		
	
	
		
			
				
			
			
				Special Offer
				Name of Product
				A short description
				
					
			            3 Star rating here
					
	            
				£4.95 £4.05
				Add to Cart

sol · Accepted Answer

You can make .mosaic__wrap and .mosaic__caption flexboxes. To maintain the vertical flow of content add flex-direction: column to both.

Then, to make .mosaic__wrap expand to fill the vertical height, add flex: 1.

/**
 * Clearfix
 */


/**
 * Typography
 */


/**
 * Media Queries.
 * 
 * 1. $bp2  =  480px 	(30rem)
 * 2. $bp3  =  600px 	(37.5rem)
 * 3. $bp4  =  768px 	(48rem)
 * 4. $bp5  =  1024px 	(64rem)
 * 5. $bp6  =  1220px 	(76.250rem)
 * 6. $bp7  =  1400px 	(87.5rem)
 */


/**
 * Base
 */


/**
 * Colours
 */


/**
 * Spacing
 */

.mosaic {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style: none;
  margin: 0 0 30px -15px;
  padding: 0;
  /* [1] */
  /* [2] */
  /* [3] */
  /* [4] */
  /* [5] */
  /* [6] */
}

.mosaic:before,
.mosaic:after {
  content: "";
  display: table;
}

.mosaic:after {
  clear: both;
}

.mosaic:before,
.mosaic:after {
  content: normal;
  /* [1] */
}

@media (min-width: 48em) {
  .mosaic {
    margin-left: -30px;
  }
}

.mosaic__item {
  background: none;
  background: rgba(255, 0, 0, 0.1);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  margin-bottom: 0;
  padding-left: -15px;
  position: relative;
  width: 50%;
  /* [1] */
  /* [2] */
  /* [3] */
  /* [4] */
  /* [5] */
  /* [6] */
  /* [1] */
  /* [2] */
  /* [3] */
  /* [4] */
  /* [5] */
  /* [6] */
}

@media (min-width: 48em) {
  .mosaic__item {
    float: left;
    padding-left: 30px;
    width: 50%;
  }
  .mosaic__item:nth-child(odd) {
    clear: left;
  }
}

@media (min-width: 87.5em) {
  .mosaic__item {
    width: 33.33333%;
  }
  .mosaic__item:nth-child(odd) {
    clear: none;
  }
  .mosaic__item:nth-child(3n+1) {
    clear: left;
  }
}

.mosaic__wrap {
  background: rgba(255, 0, 0, 0.1);
  height: 100%;
  position: relative;
}

.mosaic__link {
  background: white;
  border-bottom: none;
  display: block;
  font-weight: 400;
  height: 100%;
  padding: 0;
  -webkit-transition: all .25s;
  transition: all .25s;
  text-shadow: none;
}

.mosaic__link:hover {
  background-color: #94121f;
}

.mosaic__image-wrap {
  background-image: none;
  display: block;
  overflow: hidden;
  padding: 0;
  text-shadow: none;
}

.mosaic__image {
  display: block;
  -webkit-transition: all .25s ease-out;
  transition: all .25s ease-out;
  width: 100%;
  max-width: 100%;
  -webkit-backface-visibility: hidden;
}

.mosaic__item:hover .mosaic__image {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

.mosaic__caption {
  background: rgba(255, 0, 0, 0.1);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #778586;
  display: block;
  overflow: hidden;
  padding: 15px 15px;
  text-align: center;
  -webkit-transition: all .25s;
  transition: all .25s;
  /* [1] */
  /* [2] */
  /* [3] */
  /* [4] */
  /* [5] */
  /* [6] */
}

.mosaic__link:hover .mosaic__caption {
  color: #fbdde0;
}

@media (min-width: 48em) {
  .mosaic__caption {
    padding: 30px 30px;
  }
}

.mosaic__caption .btn {
  margin-top: auto;
}

.mosaic__title {
  color: #0e1010;
  font-size: 15px;
  font-size: 1.5rem;
  margin-bottom: 7.5px;
  -webkit-transition: all .20s;
  transition: all .20s;
  /* [1] */
  /* [2] */
  /* [3] */
  /* [4] */
  /* [5] */
  /* [6] */
}

.h-product .mosaic__title {
  margin-bottom: 0;
}

.mosaic__title a {
  background-image: none;
  font-weight: 700;
  text-shadow: none;
}

@media (min-width: 37.5em) {
  .mosaic__title {
    font-size: 20px;
    font-size: 2rem;
  }
}

.mosaic__link:hover .mosaic__title {
  color: white;
}

.mosaic__desc {
  margin-bottom: 7.5px;
}

.mosaic__value {
  margin-bottom: 15px;
}

.mosaic__value .p-price {
  color: #0e1010;
  font-weight: 700;
  margin-left: 5px;
}

.mosaic__review {
  margin-bottom: 0;
}


/* added styles */
.mosaic__wrap,
.mosaic__caption {
  display: flex;
  flex-direction: column;
}

.mosaic__caption {
  flex: 1;
}


  
    
      
        
      
      
        Special Offer
        Name of Product that is really, really, really long
        A long description to add more height to product
        
          
			            3 Star rating here
					
        
        £4.95 £4.05
        Add to Cart
      
    
  
  
    
      
        
      
      
        Special Offer
        Name of Product
        A short description
        
          
			            3 Star rating here
					
        
        £4.95 £4.05
        Add to Cart
      
    
  
  
    
      
        
      
      
        Special Offer
        Name of Product
        A short description
        
          
			            3 Star rating here
					
        
        £4.95 £4.05
        Add to Cart
      
    
  
  
    
      
        
      
      
        Special Offer
        Name of Product
        A short description
        
          
			            3 Star rating here
					
        
        £4.95 £4.05
        Add to Cart
      
    
  
  
    
      
        
      
      
        Special Offer
        Name of Product
        A short description
        
          
			            3 Star rating here
					
        
        £4.95 £4.05
        Add to Cart

Shorter divs within a grid to fill remaining vertical space + align list element to bottom

Answers (1)

Related Questions