How can I have equal heights for inner elements of flexbox grid/boxes/cards without using jQuery?

Question

I have a created a grid/box/card layout using flexbox so all items are all same heights. The layout has 4 boxes each row. This particular grid only has content/text in them so I am trying to make all the inner elements which all heading tags also of same height but I am failing to do so. I have researched a lot and tried all the different options provided in these examples but it just does not work. The issue is any row within one grid or box can be of any height as content entered is dynamic and I have no control over it

That is what I am trying to do so, Now if the content in yellow row of first box is more than that of the second box, then the yellow row of 2nd,3rd,4th boxes should resize to that of the 1st box. The boxes in the first row of of the grid do resize to the equal heights but the rows within the boxes would not and so blue and green rows of other boxes move up leaving a gap at the end of the box

Code Snippet:

.flexi-container {
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
}
.left {
  float: left;
}
.col-100 {
  width: 100%;
}
.pos-rel {
  position: relative;
}
.grid-text-item {
  width: 20%;
  margin-right: 1%;
  margin-bottom: 1%;
  background-color: #fff;
  border: 1px solid #ddd;
  flex-direction: column;
  flex: 1;
}

<div style="width:100%;margin:0 auto;position:relative;">
  <div class="grid-text-container flexi-container pos-rel col-100 left">
    <div class=" grid-text-item pos-rel left flexi-container">
      <!--            <div class="grid-text-content pos-rel flexi-item left">-->
      <!--            <a class="full-link" href=""></a>-->

      <h2 class="col-100">Name</h2>
      <h3 class="col-100">Address,Address,Address,Address,Address</h3>
      <h4 class="col-100">
                <span class="block-element">123456</span>
                <span class="block-element">email@email.com</span></h4>
      <h6 class="col-100">Subtext</h6>
    </div>
    <div class=" grid-text-item pos-rel left flexi-container">
      <!--            <div class="grid-text-content pos-rel flexi-item left">-->
      <!--            <a class="full-link" href=""></a>-->

      <h2 class="col-100">Name</h2>
      <h3 class="col-100">Address,Address,Address,Address,Address</h3>
      <h4 class="col-100">
                <span class="block-element">123456</span>
                <span class="block-element">email@email.com</span></h4>
      <h6 class="col-100">Subtext</h6>
    </div>
    <div class=" grid-text-item pos-rel left flexi-container">
      <!--            <div class="grid-text-content pos-rel flexi-item left">-->
      <!--            <a class="full-link" href=""></a>-->

      <h2 class="col-100">Name</h2>
      <h3 class="col-100">Address,Address,Address,Address,Address</h3>
      <h4 class="col-100">
                <span class="block-element">123456</span>
                <span class="block-element">email@email.com</span></h4>
      <h6 class="col-100">Subtext</h6>
    </div>
    <div class=" grid-text-item pos-rel left flexi-container">
      <!--            <div class="grid-text-content pos-rel flexi-item left">-->
      <!--            <a class="full-link" href=""></a>-->

      <h2 class="col-100">Name Name Name Name Name</h2>
      <h3 class="col-100">AddressAddress,Address,Address,Address,Address,Address</h3>
      <h4 class="col-100">
                <span class="block-element">123456</span>
                <span class="block-element">email@email.com</span></h4>
      <h6 class="col-100">Subtext</h6>
    </div>
    <div class=" grid-text-item pos-rel left flexi-container">
      <!--            <div class="grid-text-content pos-rel flexi-item left">-->
      <!--            <a class="full-link" href=""></a>-->

      <h2 class="col-100">Name</h2>
      <h3 class="col-100">Address,Address,Address,Address,Address</h3>
      <h4 class="col-100">
                <span class="block-element">123456</span>
                <span class="block-element">email@email.com</span></h4>
      <h6 class="col-100">Subtext</h6>
    </div>
    <div class=" grid-text-item pos-rel left flexi-container">
      <!--            <div class="grid-text-content pos-rel flexi-item left">-->
      <!--            <a class="full-link" href=""></a>-->

      <h2 class="col-100">Name</h2>
      <h3 class="col-100">Address,Address,Address,Address,Address,Address,Address</h3>
      <h4 class="col-100">
                <span class="block-element">123456</span>
                <span class="block-element">email@email.com</span></h4>
      <h6 class="col-100">Subtext</h6>
    </div>
    <div class=" grid-text-item pos-rel left flexi-container">
      <!--            <div class="grid-text-content pos-rel flexi-item left">-->
      <!--            <a class="full-link" href=""></a>-->

      <h2 class="col-100">Name</h2>
      <h3 class="col-100">Address,Address,Address,Address,Address</h3>
      <h4 class="col-100">
                <span class="block-element">123456</span>
                <span class="block-element">email@email.com</span></h4>
      <h6 class="col-100">Subtext</h6>
    </div>
    <div class=" grid-text-item pos-rel left flexi-container">
      <!--            <div class="grid-text-content pos-rel flexi-item left">-->
      <!--            <a class="full-link" href=""></a>-->

      <h2 class="col-100">Name</h2>
      <h3 class="col-100">Address,Address,Address,Address,Address</h3>
      <h4 class="col-100">
                <span class="block-element">123456</span>
                <span class="block-element">email@email.com</span></h4>
      <h6 class="col-100">Subtext</h6>
    </div>
    <div class=" grid-text-item pos-rel left flexi-container">
      <!--            <div class="grid-text-content pos-rel flexi-item left">-->
      <!--            <a class="full-link" href=""></a>-->

      <h2 class="col-100">Name</h2>
      <h3 class="col-100">Address,Address,Address,Address,Address</h3>
      <h4 class="col-100">
                <span class="block-element">123456</span>
                <span class="block-element">email@email.com</span></h4>
      <h6 class="col-100">Subtext</h6>
    </div>
  </div>

</div>

I am not a very advance user of flexbox and am in initial stages

Thank you very much for any help.

score 4 · Answer 1 · edited May 23 '17 at 12:33

The property you need to define is flex: 1; in the element you want to fill the available space, in this case your <h3>.

What is going to happen is that flex-grow, a property set with the shorthand flex, will now have a value of 1, letting this particular element grow to fill the free space. This works because the other elements default flex-grow value is 0.

Check this and this similar questions and answers.

Repeating myself here for clarity:

flex: <positive-number>:

Equivalent to flex: <positive-number> 1 0. Makes the flex item flexible and sets the flex basis to zero, resulting in an item that receives the specified proportion of the free space in the flex container. If all items in the flex container use this pattern, their sizes will be proportional to the specified flex factor.

I changed the structure a little bit, making it more semantic.

CODE SNIPPET:

/* #region General Styling */

body {
  margin: 0;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
h2,
h3,
h4,
h6 {
  padding: 1em;
  margin: 0;
}
hgroup {
  margin: 1em;
  border: 1px solid black;
}
h2 {
  background-color: tomato;
}
h3 {
  background-color: gold;
}
h4 {
  background-color: dodgerblue;
}
h6 {
  background-color: mediumseagreen;
}
/* #endregion*/

.flex-container {
  display: flex;  /* Top Level Flex-Container*/
  flex-wrap: wrap;
}
.flex-container > li {
  display: flex;  /* This is both a Flex-item and a Flex-container */
  flex-basis: 33%;
}
.flex-container > li > hgroup {
  display: flex;  /* This is both a Flex-item and a Flex-container  */
  flex-direction: column;
  flex: 1;  /* Fill available space within its Flex-container */
}
h3 {
  flex: 1;  /* Can grow to fill the available space within its Flex-container, you can instead just declare flex-grow: 1; too. */
}

<main>
  <section>
    <ul class="flex-container">
      <li>
        <hgroup>
          <h2>Name</h2>
          <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae tellus at purus bibendum euismod eu vehicula odio. Praesent fringilla et leo scelerisque consequat. Pellentesque ornare, ligula non bibendum dapibus, nunc ex pretium nulla, in venenatis sem justo sed velit. Maecenas massa tortor, imperdiet non lacinia in, dapibus eu est. Sed eu ornare est. Proin sapien tellus, dictum a ex quis, egestas euismod justo. Phasellus metus nisi, suscipit a auctor quis, blandit vel dolor.</h3>
          <h4>
          <span>123456</span>
          <span>email@email.com</span>
        </h4>
          <h6>Subtext</h6>
        </hgroup>
      </li>
      <li>
        <hgroup>
          <h2>Name</h2>
          <h3>Address, Address, Address, Address, Address</h3>
          <h4>
          <span>123456</span>
          <span>email@email.com</span>
        </h4>
          <h6>Subtext</h6>
        </hgroup>
      </li>
      <li>
        <hgroup>
          <h2>Name</h2>
          <h3>Address, Address, Address, Address, Address</h3>
          <h4>
          <span>123456</span>
          <span>email@email.com</span>
        </h4>
          <h6>Subtext</h6>
        </hgroup>
      </li>
      <li>
        <hgroup>
          <h2>Name</h2>
          <h3>Address, Address</h3>
          <h4>
          <span>123456</span>
          <span>email@email.com</span>
        </h4>
          <h6>Subtext</h6>
        </hgroup>
      </li>
      <li>
        <hgroup>
          <h2>Name</h2>
          <h3>Address, Address, Address, Address, Address</h3>
          <h4>
          <span>123456</span>
          <span>email@email.com</span>
        </h4>
          <h6>Subtext</h6>
        </hgroup>
      </li>
      <li>
        <hgroup>
          <h2>Name</h2>
          <h3>Address, Address, Address, Address, Address</h3>
          <h4>
          <span>123456</span>
          <span>email@email.com</span>
        </h4>
          <h6>Subtext</h6>
        </hgroup>
      </li>
    </ul>
  </section>
</main>

jsFiddle

Notes:

You should use HTML5 Semantic Elements so that your markup actually describes its meaning both to the browser and to us, developers.
<hgroup> should be used when having a group of headings. Here we also use it to give some spacing between flex-items, which is nice.
Heading tags are block level elements, you do not need to define width value to100%.
There is no need to use floats here, all can be done with flexbox.

EDIT:

Editing your question I noticed this:

Make all the inner elements which all heading tags also of same height...

Something should be clear, flexbox is not a two dimensional layout meaning you can only distribute flex-items in a row or column direction within the same flex-container.

What you want there is to somehow inherit the height of similar tags in different flex-containers, which is not possible.

You can ofcourse try to do something like:

/* #region General Styling */

body {
  margin: 0;
  background-color: peachpuff;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
h2,
h3,
h4,
h6 {
  padding: 1em;
  margin: 0 10px;
}
h2 {
  background-color: tomato;
}
h3 {
  background-color: gold;
}
h4 {
  background-color: dodgerblue;
}
h6 {
  background-color: mediumseagreen;
}
/* #endregion*/

/* Quick Demo */

section {
  display: flex;
  flex-direction: column;
  margin-bottom: 1em;
}
hgroup {
  display: flex;
  flex: 1;
}
h2 {
  margin-top: 1em;
}
h2,
h3,
h4,
h6 {
  flex: 1;
}

<section>
  <hgroup>
    <h2 contenteditable>h2 h2 h2 h2 h2 h2 h2 h2 h2 h2 h2</h2>
    <h2 contenteditable>h2</h2>
    <h2 contenteditable>h2</h2>
  </hgroup>
  <hgroup>
    <h3 contenteditable>h3</h3>
    <h3 contenteditable>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae tellus at purus bibendum euismod eu vehicula odio.</h3>
    <h3 contenteditable>h3</h3>
  </hgroup>
  <hgroup>
    <h4 contenteditable>h4</h4>
    <h4 contenteditable>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae tellus at purus bibendum euismod eu vehicula odio.</h4>
    <h4 contenteditable>h4</h4>
  </hgroup>
  <hgroup>
    <h6 contenteditable>h6</h6>
    <h6 contenteditable>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae tellus at purus bibendum euismod eu vehicula odio.</h6>
    <h6 contenteditable>h6</h6>
  </hgroup>
  <hgroup>
    <h2 contenteditable>h2 h2 h2 h2 h2 h2 h2 h2 h2 h2 h2</h2>
    <h2 contenteditable>h2</h2>
    <h2 contenteditable>h2</h2>
  </hgroup>
  <hgroup>
    <h3 contenteditable>h3</h3>
    <h3 contenteditable>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae tellus at purus bibendum euismod eu vehicula odio.</h3>
    <h3 contenteditable>h3</h3>
  </hgroup>
  <hgroup>
    <h4 contenteditable>h4</h4>
    <h4 contenteditable>h4</h4>
    <h4 contenteditable>h4</h4>
  </hgroup>
  <hgroup>
    <h6 contenteditable>h6</h6>
    <h6 contenteditable>h6</h6>
    <h6 contenteditable>h6</h6>
  </hgroup>
</section>

But I do not recommend it, use javascript for that.

Thank You for taking time to explain. Unfortunatly, your solution does not solve my issue but as you explained it is not possible by flexbox. I will have to use JS for it. Your solution would have worked if the content in h3 is the only one dynamic but in my case content in h2 and h3 is dynamic, only the last 2 headings might not increase. — melonye, Oct 22 '16 at 22:55

How can I have equal heights for inner elements of flexbox grid/boxes/cards without using jQuery?

Code Snippet:

1 Answers1

Linked