Fixed content's max-height on horizontal cards with images

[aisamu]

Horizontal cards that have images have their contents' height restricted to 40% for no apparent reason.

Example codepen

Vertical cards have their .card-content max-height set to 40% because .card-image, set at 60%, is right above them.
Horizontal cards have the image on a separate column, leaving 100% of the height available for the contents.

The new rule has exactly the same specificity (0, 4, 0) as the offending rule, but comes afterwards and overwrites it.

[acburst]

We added an extra div called card-stacked that fixes this issue. Not sure if you noticed that in the documentation. I guess that could be better explained in the documentation?

[aisamu]

Hey @acburst

Thanks for the quick reply! You are correct, adding this new div makes the content stretch as expected. In any case, I think it's useful to mention why I had the problem in the first place:

1. A horizontal card without small works as expected.
   The content stops filling the vertical space only after the small class is added. It's not evident that a class that provides uniformly sized cards would require an added div only for the horizontal case.
2. My use case is to have only the image and the content.
   There's nothing to be stacked with the content, and it would have been very unintuitive to add a .card-stacked div with a single child, so I didn't even think about searching for that in the documentation. As a matter of fact, I've copied the horizontal card example from site and deleted the stacked div right away, since it made no "semantic sense" having it there.

These were the major points that led me to change the small css rule instead of using the already implemented solution. It also (apparently) fixes the issue while avoiding the inconsistencies.

In any case, I think you are right on the spot regarding the docs!