Profile: chrisC-25

Problem:
A Layout has a row with two columns. The columns have background colours and should be equal height, but typically one column is shorter than the other and the background colour does not extend to the bottom of the row.

Solution:
Simply applying display: flex to the parent row will by default make the child columns expand to the full height.

The Layouts grid is based on the Bootstrap 3 grid and doesn't use flexbox, so you just need to be careful to use a media query to add the style rule or it will break the collapsing of the grid on smaller screens.

So, you'll need to edit your Layout and add a class name to the row where you want the child columns to be of equal height, e.g. a class name of "equal-height".

Then add the following custom CSS:

@media ( min-width: 1200px ){
  .equal-height {
    display: flex;
  }
}

Your media query may need to be different depending on your Layout.