1

I've got Flex figured out when using divs within divs, but is it possible to do the same thing for divs within those?

In this example, I'm trying to build a basic ecommerce product grid. https://codepen.io/BevansDesign/pen/rJrNyQ

Bare minimum version:

<div id="container">
    <div class="prod-box">
        <div class="title">This is a product title</div>
    </div>
    <div class="prod-box">
        <div class="title">This is a product title</div>
    </div>
</div>

Is it possible to have div.title be the same height in each row? The best I've been able to do is this, but that only stretches the third-tier divs within the second-tier.

Thanks!

BevansDesign
  • 4,908
  • 1
  • 12
  • 14
  • 1
    Well you would have to lay it out differently, as in each row of titles in the same flex container. Other than that you would need to reply on js to accomplish this – Huangism Feb 22 '18 at 21:27
  • 1
    https://stackoverflow.com/q/36721216/3597276 – Michael Benjamin Feb 22 '18 at 21:37
  • 1
    No, that is not possible w/o script. – Asons Feb 22 '18 at 22:02
  • I was afraid of that. Oh well. Thanks everyone. I'll look into using some sort of Masonry library. – BevansDesign Feb 22 '18 at 22:08
  • 1
    If script is an option, here is an answer of mine, with a small plain javascript (no heavy libraries needed): https://stackoverflow.com/questions/46596170/how-to-get-header-from-cards-or-similar-to-have-the-same-height-with-flex-box ... let me know if this is an option – Asons Feb 23 '18 at 08:43

0 Answers0