Question

This fiddle shows a very basic version of the markup I have. I want the .module-container‘s to resize between 230px (min-height) and 300px (max-height). Basically what I like to know is whether to set the min-/max-height on the .row and giving the .module-container‘s a height: 100%; or explicitly give each .module-container a (min-/max-)height as well as a height of 100% and the containing .row just wraps around it like so

min-height: 14.375em; /* 230px, 1em=16px */
height: 100%;
max-height: 18.75em; /* 300px, 1em=16px */

What I expect is that the div grows in between 230px and 300px. But does that work when the containing .row container has no explicit height and thus wraps around each .column?

Answer 1

Set it on the .module-container. There’s no need to set height: 100%; because any block level element will expand to wrap its inner elements.