0

I have 3 boxes on a row, stretched. Each box contains various blocks of html and they have varying heights.

I am trying to make every contained block of html of the same height despite the length of their content but I get this:

enter image description here

What I need is all the colored boxes to have the same height despite of the content.

I created this codepen as the code would be too long to post:

https://codepen.io/vlrprbttst/pen/owYKWV?editors=1100

And here are my flexbox styles (there's a lot going on, I may have over coded this):

// -----------------------------------------
// flexbox styles  -------------------------
// -----------------------------------------

.choice-container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: stretch;
}
.choice-item {
    width: 376px;
    flex: 0 0 376px;
    display: flex;
    flex-flow: column nowrap;
    align-items: stretch;

}

.choice-item-inner {
    flex: 1 1 100%;
    display:flex;
    flex-flow: column nowrap;
  align-items: stretch;


}

.choice-item__content {
   flex: 1 0 auto;
  display:flex;
  flex-flow: column nowrap;
  align-items: stretch;

}

.choice-item__headline,
.choice-item__text,
.offer-specs{
  flex: 1 0 100%;

}

Is there something wrong or am I on the wrong track using a wrong approach?

I'm new to flexbox and I'm trying to get my head around it.

Thanks!

Elydasian
  • 2,016
  • 5
  • 23
  • 41
valerio0999
  • 11,458
  • 7
  • 28
  • 56
  • I could be wrong, but I think this would only be possible with Javascript. You could try out http://tsvensen.github.io/equalize.js/ if you don't want to code your own solution. – WizardCoder Jun 16 '17 at 18:01
  • https://github.com/liabru/jquery-match-height is much better ;) but i'm looking for a flexbox solution if it exists – valerio0999 Jun 16 '17 at 18:05
  • 1
    You can do that with CSS only, but it will take a some markup change. Check this answer of mine, it shows how it is possible: https://stackoverflow.com/a/44164542/2827823 – Asons Jun 16 '17 at 18:40
  • 1
    @LGSon Master flex to the rescue. That is a good solution. – WizardCoder Jun 16 '17 at 22:15
  • @LGSon looks great! where's the code for the equal heights? where should i look? looks like a different case scenario – valerio0999 Jun 17 '17 at 09:34
  • 1
    The main trick is to _not_ wrap each item, and then use the `order` property and set `order: 1` on the headers, `order: 2` on the descriptions, and so on. The equal height you get automatically, as flex items in a row direction container always has the same height per row – Asons Jun 17 '17 at 09:39
  • @LGSon could you help me out on this? https://codepen.io/vlrprbttst/pen/owYKWV?editors=1100 it just won't work :( – valerio0999 Jun 17 '17 at 10:49
  • 1
    Here is a [___simplified codepen version___](https://codepen.io/anon/pen/MoJoJw), so you see the logic. And don't forget to upvote on my linked answer :) – Asons Jun 17 '17 at 11:18
  • @LGSon based on your suggestion, i did this: https://codepen.io/vlrprbttst/pen/BZpqxJ?editors=1100 - not ideal and a bit hard to maintain, but it works. basically as you suggested, instead of thinking about 2 separate blocks of elements, you go with rows so the result are "faux" cards. i'm having a hard time giving them a box-shadow though :/ – valerio0999 Jun 18 '17 at 09:41
  • 1
    I think that looks great .. and shadow like this maybe: https://codepen.io/anon/pen/eRgPqO – Asons Jun 18 '17 at 09:47

0 Answers0