Using flexbox to get all elements same height

Question

I have to make that each part of the container is same height in all containers and since content can vary a lot for each container I just can't set hardcoded height because some of these inner containers exist for one but doesn't get added for other. Interested if this can be achieved by only using CSS, without javascript

So far I have tried with flexbox but not sure what I was doing wrong because it didn't work for me really and each container didn't take equal height based on the longest container.

Basically, what I have to do - match each container to be in equal height. If some text doesn't exist in one but exists in other needs to add empty space In pictures, it is something like this -

Currently I have -

Expected (notice empty spaces also) -

My fiddle code with HTML structure I have - Fiddle code

Maybe needs to change some HTML structure also to get this to work? (i.e. moving container with a yellow border inside details container with purple border?). The most important part is to not use javascript but only CSS!

Thank you all!

My current HTML structure is something like this (also visible in fiddle) -

<ul>
  <li class="li-item">
    <div class="li-item-inner">
      <div class="heading">
        <div class="title">Some title text</div>
        <div class="subtitle">Title subtitle goes here</div>
      </div>
      <a href="#" class="photo"><div class="img">Picture here...</div></a>
      <div class="some-extra-block">
        Some extra info for some li-item
      </div>
      <div class="details">
        <div class="price">
          <div class="item-price">15$</div>
        </div>
        <div class="small-images">
          <div class="small-image">Some image here</div>
          <div class="small-image">Some image here</div>
        </div>
        <div class="see-item">
            <a href="#">click here to see item</a>
        </div>
      </div>
    </div>
  </li>
  <li class="li-item">
    <div class="li-item-inner">
      <div class="heading">
        <div class="title">Some title text goes here</div>
        <div class="subtitle">Title subtitle goes here in 2 rows</div>
      </div>
      <a href="#" class="photo"><div class="img">Picture here...</div></a>
      <div class="details">
        <div class="price">
          <div class="item-price">15$</div>
        </div>
        <div class="small-images">
          <div class="small-image">Some image here</div>
          <div class="small-image">Some image here</div>
        </div>
        <div class="see-item">
            <a href="#">click here to see item</a>
        </div>
      </div>
    </div>
  </li>
  <li class="li-item">
    <div class="li-item-inner">
      <div class="heading">
        <div class="title">Some title text goes here</div>
        <div class="subtitle">if subtitle more than 2 rows then gets cut off all the rest and doesn't show it like this </div>
      </div>
      <a href="#" class="photo"><div class="img">Picture here...</div></a>
      <div class="details">
        <div class="price">
          <div class="item-price">15$</div>
        </div>
        <div class="small-images">
          <div class="small-image">Some image here</div>
          <div class="small-image">Some image here</div>
        </div>
        <div class="see-item">
            <a href="#">click here to see item</a>
        </div>
      </div>
    </div>
  </li>
  <li class="li-item">
    <div class="li-item-inner">
      <div class="heading">
        <div class="title">Some title text goes here which will be atleast 3 lines long</div>
        <div class="subtitle">Title subtitle goes here</div>
      </div>
      <a href="#" class="photo"><div class="img">Picture here...</div></a>
      <div class="details">
        <div class="price">
          <div class="before-price">Some text</div>
          <div class="item-price">15$</div>
        </div>
        <div class="small-images">
          <div class="small-image">Some image here</div>
          <div class="small-image">Some image here</div>
        </div>
        <div class="see-item">
            <a href="#">click here to see item</a>
        </div>
      </div>
    </div>
  </li>
  <li class="li-item">
    <div class="li-item-inner">
      <div class="heading">
        <div class="title">Some title text</div>
        <div class="subtitle">Title subtitle goes here</div>
      </div>
      <a href="#" class="photo"><div class="img">Picture here...</div></a>
      <div class="details">
        <div class="price">
          <div class="item-price">15$</div>
        </div>
        <div class="small-images">
          <div class="small-image">Some image here</div>
          <div class="small-image">Some image here</div>
        </div>
        <div class="see-item">
            <a href="#">click here to see item</a>
        </div>
      </div>
    </div>
  </li>
  <li class="li-item">
    <div class="li-item-inner">
      <div class="heading">
        <div class="title">Some title text</div>
        <div class="subtitle">Title subtitle goes here</div>
      </div>
      <a href="#" class="photo"><div class="img">Picture here...</div></a>
      <div class="details">
        <div class="price">
          <div class="item-price">15$</div>
        </div>
        <div class="small-images">
          <div class="small-image">Some image here</div>
          <div class="small-image">Some image here</div>
        </div>
        <div class="see-item">
            <a href="#">click here to see item</a>
        </div>
      </div>
    </div>
  </li>
  <li class="li-item">
    <div class="li-item-inner">
      <div class="heading">
        <div class="title">Some title text</div>
        <div class="subtitle">Title subtitle goes here</div>
      </div>
      <a href="#" class="photo"><div class="img">Picture here...</div></a>
      <div class="some-extra-block">
        Some extra info for some li-item
      </div>
      <div class="details">
        <div class="price">
                  <div class="before-price">Some text</div>
          <div class="item-price">15$</div>
        </div>
        <div class="small-images">
          <div class="small-image">Some image here</div>
          <div class="small-image">Some image here</div>
        </div>
        <div class="see-item">
            <a href="#">click here to see item</a>
        </div>
      </div>
    </div>
  </li>
</ul>

if you are looking to align *each* sections in adjacent `li`s - then that may not be possible as yet in CSS - see [the discussion here](https://stackoverflow.com/questions/55272962/flexbox-alignment-of-containers-and-content-vertically) — kukkuz, Mar 24 '19 at 12:19
@kukkuz yes, exactly what I meant only you missed container with green border also, it also should be in same height. — Mee, Mar 24 '19 at 12:21
you could try a `min-height` for the green section to align them at the same height? — kukkuz, Mar 24 '19 at 12:23
@kukkuz probably not. Since for green container - title can be X lines long (for example for one it is 2 lines long, for another 5 lines long). I can set height only for subtitle since it will be not more than 2 lines long, then it gets cut off — Mee, Mar 24 '19 at 12:27
alignment of flex-items in adjacent *flexboxes* is not possible - I guess you should read through this: https://stackoverflow.com/questions/55272962/flexbox-alignment-of-containers-and-content-vertically perhaps a CSS Grid solution? — kukkuz, Mar 24 '19 at 12:30
@kukkuz and how css would look when grid is used? If that would solve this issue I could try it. Thank you! :) — Mee, Mar 24 '19 at 12:33
read through the link I have added, a very similar issue is being discussed there, along with a CSS grid solution (with a change in markup) - very similar to your case — kukkuz, Mar 24 '19 at 12:37
@kukkuz didn't try yet. Will try today with grid, hope it will work — Mee, Mar 25 '19 at 07:51
@kukkuz Okay, can't really get nothing to work with grid, everything just breaks up for me :D Not sure what I'm doing wrong with grid — Mee, Mar 25 '19 at 08:21
a simplified version here: https://jsfiddle.net/d3k5eqzf/ you'll have to further manually have one grid for each *row* going with this solution and adjust with media queries I guess... — kukkuz, Mar 25 '19 at 08:41

score 0 · Answer 1 · answered May 12 '19 at 03:53

Try this:

* {
 box-sizing: border-box;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
@supports(flex-wrap:wrap) {
 ul {
   display: flex;
   flex-wrap: wrap;
 }
}

.li-item {
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid black;
  width: 23%;
  width: calc(25% - 10px);
  min-width: 11em;

  /* fallback styles */
  display: inline-block;
  vertical-align: top;
}

.li-item-inner {
  border: 1px solid red;
  padding: 7px;
  height: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}

.heading {
  border: 1px solid green;
}

.subtitle {
  overflow: hidden;
  max-height: 32px;
}

.photo {
  border: 1px solid blue;
  display: block;
  width: 100%;
  height: 70px;
}

.some-extra-block {
 border: 1px solid orange;
}

.details {
  border: 1px solid purple;
  margin-top: auto; /* push this element to the bottom when there is extra available space */
}

<ul>
  <li class="li-item">
    <div class="li-item-inner">
      <div class="heading">
        <div class="title">Some title text</div>
        <div class="subtitle">Title subtitle goes here</div>
      </div>
      <a href="#" class="photo"><div class="img">Picture here...</div></a>
      <div class="some-extra-block">
        Some extra info for some li-item
      </div>
      <div class="details">
        <div class="price">
          <div class="item-price">15$</div>
        </div>
        <div class="small-images">
          <div class="small-image">Some image here</div>
          <div class="small-image">Some image here</div>
        </div>
        <div class="see-item">
            <a href="#">click here to see item</a>
        </div>
      </div>
    </div>
  </li>
  <li class="li-item">
    <div class="li-item-inner">
      <div class="heading">
        <div class="title">Some title text goes here</div>
        <div class="subtitle">Title subtitle goes here in 2 rows</div>
      </div>
      <a href="#" class="photo"><div class="img">Picture here...</div></a>
      <div class="details">
        <div class="price">
          <div class="item-price">15$</div>
        </div>
        <div class="small-images">
          <div class="small-image">Some image here</div>
          <div class="small-image">Some image here</div>
        </div>
        <div class="see-item">
            <a href="#">click here to see item</a>
        </div>
      </div>
    </div>
  </li>
  <li class="li-item">
    <div class="li-item-inner">
      <div class="heading">
        <div class="title">Some title text goes here</div>
        <div class="subtitle">if subtitle more than 2 rows then gets cut off all the rest and doesn't show it like this </div>
      </div>
      <a href="#" class="photo"><div class="img">Picture here...</div></a>
      <div class="details">
        <div class="price">
          <div class="item-price">15$</div>
        </div>
        <div class="small-images">
          <div class="small-image">Some image here</div>
          <div class="small-image">Some image here</div>
        </div>
        <div class="see-item">
            <a href="#">click here to see item</a>
        </div>
      </div>
    </div>
  </li>
  <li class="li-item">
    <div class="li-item-inner">
      <div class="heading">
        <div class="title">Some title text goes here which will be atleast 3 lines long</div>
        <div class="subtitle">Title subtitle goes here</div>
      </div>
      <a href="#" class="photo"><div class="img">Picture here...</div></a>
      <div class="details">
        <div class="price">
          <div class="before-price">Some text</div>
          <div class="item-price">15$</div>
        </div>
        <div class="small-images">
          <div class="small-image">Some image here</div>
          <div class="small-image">Some image here</div>
        </div>
        <div class="see-item">
            <a href="#">click here to see item</a>
        </div>
      </div>
    </div>
  </li>
  <li class="li-item">
    <div class="li-item-inner">
      <div class="heading">
        <div class="title">Some title text</div>
        <div class="subtitle">Title subtitle goes here</div>
      </div>
      <a href="#" class="photo"><div class="img">Picture here...</div></a>
      <div class="details">
        <div class="price">
          <div class="item-price">15$</div>
        </div>
        <div class="small-images">
          <div class="small-image">Some image here</div>
          <div class="small-image">Some image here</div>
        </div>
        <div class="see-item">
            <a href="#">click here to see item</a>
        </div>
      </div>
    </div>
  </li>
  <li class="li-item">
    <div class="li-item-inner">
      <div class="heading">
        <div class="title">Some title text</div>
        <div class="subtitle">Title subtitle goes here</div>
      </div>
      <a href="#" class="photo"><div class="img">Picture here...</div></a>
      <div class="details">
        <div class="price">
          <div class="item-price">15$</div>
        </div>
        <div class="small-images">
          <div class="small-image">Some image here</div>
          <div class="small-image">Some image here</div>
        </div>
        <div class="see-item">
            <a href="#">click here to see item</a>
        </div>
      </div>
    </div>
  </li>
  <li class="li-item">
    <div class="li-item-inner">
      <div class="heading">
        <div class="title">Some title text</div>
        <div class="subtitle">Title subtitle goes here</div>
      </div>
      <a href="#" class="photo"><div class="img">Picture here...</div></a>
      <div class="some-extra-block">
        Some extra info for some li-item
      </div>
      <div class="details">
        <div class="price">
                  <div class="before-price">Some text</div>
          <div class="item-price">15$</div>
        </div>
        <div class="small-images">
          <div class="small-image">Some image here</div>
          <div class="small-image">Some image here</div>
        </div>
        <div class="see-item">
            <a href="#">click here to see item</a>
        </div>
      </div>
    </div>
  </li>
</ul>

Using flexbox to get all elements same height

1 Answers1