DIVs with the same height in one line?

[Michael Guenther]

Hi all,

I would like to create tiles on my Confluence home page as a starting point for the main topic areas. I have realised this with the following macros:

- Div
- clickable
- CSS stylesheet

The result looks like this:

The problem now is that the height of the DIVs varies when the display width is reduced:

In classic html and css I would solve the problem as follows.

CSS definition

.row {
  display: flex; /* equal height of the children */
}

.col {
  flex: 1; /* additionally, equal width */
  padding:2em;
  margin: 10px;
}

HTML

<div class="row">
  <div class="col" style="background-color: red;">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="col" style="background-color: red;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div>
  <div class="col" style="background-color: red;">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
</div>
<div class="row">
  <div class="col" style="background-color: red;">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="col" style="background-color: red;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis.</div>
  <div class="col" style="background-color: red;">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
</div>

Result tested on jsfiddle.

I have tested this solution in Confluence. Unfortunately, it does not work. The DIVs are displayed one below the other and not side by side as expected and tested in jsfiddle.

Does anyone have an idea what the problem is?

Thank you.

Greetings Michael

[Michael Guenther · Accepted solution]

Oh my God. What a stupid mistake. Every now and then it makes sense to put problems aside and look at them again the next day. The solution I showed also works in Confluence. I had inserted a comment in the CSS stylesheet and forgotten to close the comment with */. Of course, the following CSS configuration was not taken into account.

Here is the solution for Confluence with using above css code:

Step 1: Create an area
Step 2: In this area one DIV per line with the class row
Step 3: In the row created in step 2, as many DIVs as desired as a cell, with the class col.

Result: All cells in a row have the same height, regardless of the content.

Translated with www.DeepL.com/Translator (free version)