CODEWITHSUNDEEP
htmlcssflexboxstretch
Nando
Nando

Reputation: 11

Flexbox items of same size

How can I force flexbox items to have same height.

In examples I found online, people are using align-items: stretch css property, but my example is more complex.

Here is a codepen example:

.container {
  background-color: red;
  display: flex;
  align-items: stretch;
}

.boxes {
  background-color: yellow;
  margin: 5px;
  display: flex;
}

.boxes-column {
  flex-direction: column;
}

.box {
  background-color: green;
  width: 100px;
  margin: 5px;
}

.heading {
  background-color: pink;
}
<body>
  <div class="container">
    <div class="boxes boxes-column">
      <div class="heading">This is heading</div>
      <div class="boxes">
        <div class="box">Content content content content content content content</div>
        <div class="box">Content content</div>
        <div class="box">Content</div>
        <div class="box">Contento contento</div>
        <div class="box">Cc</div>
        <div class="box">Contetno contento contento</div>
      </div>
    </div>
    <div class="boxes boxes-column">
      <div class="heading">This is heading 2</div>
      <div class="boxes">
        <div class="box">Content</div>
        <div class="box">Contentno Contetn</div>
        <div class="box">C</div>
      </div>
    </div>

  </div>
</body>

Height of items items below 'Heading' and height of items below 'Heading 2' should be equal.

Upvotes: 1

Views: 1658

Answers (1)

kukkuz
kukkuz

Reputation: 42352

Used this css and now the boxes have the same height:

.container > .boxes > .boxes {
  flex: 1;
}

Take a look at the below snippet:

.container {
  background-color: red;
  display: flex;
  align-items: stretch;
}

.boxes {
  background-color: yellow;
  margin: 5px;
  display: flex;
}

.boxes-column {
  flex-direction: column;
}

.box {
  background-color: green;
  width: 100px;
  margin: 5px;
}

.heading {
  background-color: pink;
}

.container > .boxes > .boxes {
  flex: 1;
}
<body>
  <div class="container">
    <div class="boxes boxes-column">
      <div class="heading">This is heading</div>
      <div class="boxes">
        <div class="box">Content content content content content content content</div>
        <div class="box">Content content</div>
        <div class="box">Content</div>
        <div class="box">Contento contento</div>
        <div class="box">Cc</div>
        <div class="box">Contetno contento contento</div>
      </div>
    </div>
    <div class="boxes boxes-column">
      <div class="heading">This is heading 2</div>
      <div class="boxes">
        <div class="box">Content</div>
        <div class="box">Contentno Contetn</div>
        <div class="box">C</div>
      </div>
    </div>

  </div>
</body>

Upvotes: 2

Related Questions