CSS make height of divs equal (Adjusted to the div with most content)

Question

I am creating a quiz game for my website. It sometimes happens that the content of the answers is different in length, which means that the divs containing the content have different height.

I want them to have the same height. They must somehow get the height of the div with the most content

Here is a Fiddle with the problem.

The live site is https://www.path-of-exile-builds.com/quiz

The problem:

I tried using

display: flex;

But it never worked. Right now I have no ideas. I will probably try to play around with JS and set the elements height on displaying the next question, but I feel like there should be an easier solution with CSS.

flexbox _is_ the easy solution to this. What more complex approaches have been used for this in the past, before flexbox, is something you can research yourself. — CBroe, Jan 16 '18 at 11:36
I have tried every approach on flexbox and it never worked, I agree its a basic question, but still I am missing something then. — Roman, Jan 16 '18 at 11:37
Please read this: [Something on my website doesn't work, can I just paste a link to it?](https://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it) and also links to jsfiddle must be accompanied code in the question itself. Also if you google your title, there are hundreds of similar questions — Pete, Jan 16 '18 at 11:38
@Roman your build of the website is wrong, if you are going to use **bootstrap grid** please do read its documentation properly on its grid system. — Jithin Raj P R, Jan 16 '18 at 11:43
@weBer Can you be a bit more precise what is wrong? That would help me a lot! — Roman, Jan 16 '18 at 11:46
@Roman if you are creating a grid with `.col-` it should wrap under a `.row` div, a full row consist of 12 col's in bootstrap. Reffer link - https://getbootstrap.com/docs/3.3/css/, **In a `.row` there should be only max 12 col's remember it** — Jithin Raj P R, Jan 16 '18 at 12:05

score 2 · Accepted Answer · answered Jan 16 '18 at 11:42

Yes, flexbox is the way, but you have to set it properly. This few lines of code did the magic:

.quiz-container {
  display: flex;
  flex-flow: row wrap;
}
.quiz-container .question {
  flex: 1 0 100%;
}
.quiz-container .helper {
  flex: 0 0 50%;
}
.quiz-container .helper .possible-answers {
  height: 100%;
}

Try live version here: https://jsfiddle.net/xpdxyaz6/79/

CSS make height of divs equal (Adjusted to the div with most content)

1 Answers1