CODEWITHSUNDEEP
htmlcssflexbox
anonymoose
anonymoose

Reputation: 1243

Make children of flex div have same height (on per-"row" basis)

I have a flex div (.parent) with child divs (you guessed it, .child) that wraps into more rows. My problem is that I can't seem to get the border of each div .card to have the same height without ruining my "grid". When I try designating a specific height for .child, etc. the heights look terrible because not each row has the same lengths of content. I've seen examples of this but am not sure how to tackle it with flex so that the multiple rows have the same height (without every single "cell" being the same height and producing as much of a mess.

.parent {
  display: flex;
  flex-grow: 1;
  flex-wrap: wrap;
  margin: 0 auto;
  max-width: 100%;
  width: 100%;
}

.child {
  height: 100%;
  margin-top: 20px;
  margin: 1%;
  display: inline-flex;
}

.a-title {
  font-size: 1.3em;
  font-weight: 700;
  width: 100%;
}

.child .card {
  border-radius: 3px;
  border: 1px solid;
  font-size: .8em;
  padding: 10px;
  display: inline-block;
  overflow: hidden;
  /* height: 600px; */
}
<div class="parent">
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>

      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
</div>

Trying to avoid what's going on here (current code example): https://jsfiddle.net/4gy7fzw1/

Example of code without set heights: https://jsfiddle.net/t2yzfkm9/

Upvotes: 2

Views: 11335

Answers (2)

Pallavi
Pallavi

Reputation: 31

width and height don't work with flex, use "flex" property to give/set width of the elements.

I have updated your css for "child" and "parent" class to make all the cards same in height.

.parent {
  display: flex;
  flex-grow: 1;
  flex-wrap: wrap;
 
}

.child {
  margin: 1%;
  display: flex;
  align-items: stretch;
}

.a-title {
  font-size: 1.3em;
  font-weight: 700;
  width: 100%;
}

.child .card {
  border-radius: 3px;
  border: 1px solid;
  font-size: .8em;
  padding: 10px;
  display: inline-block;
  overflow: hidden;
  /* height: 600px; */
}
<div class="parent">
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>

      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
</div>

Upvotes: 1

Obsidian Age
Obsidian Age

Reputation: 42314

Typically, to have each column in a flexbox layout have the same height, all you need to do is specify display: flex on the parent element (.parent). In your specific situation, you're setting height: 100% on the child element (.child).

In flexbox, height: 100% actually does the opposite of what you may expect, due to percentage-driven values being based on the height of the containing block. height: auto will allow the element to expand (and is the default).

In short, to have your columns be equal height, simply remove height: 100% from .child:

.parent {
  display: flex;
  flex-grow: 1;
  flex-wrap: wrap;
  margin: 0 auto;
  max-width: 100%;
  width: 100%;
}

.child {
  /*height: 100%;*/
  margin-top: 20px;
  margin: 1%;
  display: inline-flex;
}

.a-title {
  font-size: 1.3em;
  font-weight: 700;
  width: 100%;
}

.child .card {
  border-radius: 3px;
  border: 1px solid;
  font-size: .8em;
  padding: 10px;
  display: inline-block;
  overflow: hidden;
  /* height: 600px; */
}
<div class="parent">
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>

      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
</div>

Upvotes: 7

Related Questions