CODEWITHSUNDEEP
htmlcssflexbox
Dsmufsemfisajd
Dsmufsemfisajd

Reputation: 127

Give equal height to children of elements within a flex container

Right now, my orange squares (the children in the flex container) work as intended and they are all the same height, but I can't make it work for the red ones.

I want to make the height of the red items (the children of the children) all have the same height as the highest one.

My HTML is the following:

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
}

.col  {
  flex: 1;
  background:orange;
  margin: 1px;
}

.col-item {
  margin: 15px;
}
<html>
  <body>
    <div class="container">
        <div class="col">
          <div class="col-item" style="background: red;">
                <h2>Column 1</h2>
    <p>Hello World</p>

          </div>
      </div>
      <div class="col">
        <div class="col-item" style="background: red;">
              <h2>Column 2</h2>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>

          </div>
      </div>
      <div class="col">
        <div class="col-item" style="background: red;">
              <h2>Column 3</h2>
    <p>Some other text..</p>
    <p>Some other text..</p>
          </div>
      </div>
    </div>
  </body>
</html>

Upvotes: 1

Views: 14501

Answers (2)

Erica T.
Erica T.

Reputation: 450

You can use for the inner container the same properties you used in the outer one (display: flex and flex: 1):

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
}

.col  {
  flex: 1;
  display: flex;
  background:orange;
  margin: 1px;
}

.col-item {
  flex: 1;
  margin: 15px;
}
<html>
  <body>
    <div class="container">
        <div class="col">
          <div class="col-item" style="background: red;">
                <h2>Column 1</h2>
    <p>Hello World</p>

          </div>
      </div>
      <div class="col">
        <div class="col-item" style="background: red;">
              <h2>Column 2</h2>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>

          </div>
      </div>
      <div class="col">
        <div class="col-item" style="background: red;">
              <h2>Column 3</h2>
    <p>Some other text..</p>
    <p>Some other text..</p>
          </div>
      </div>
    </div>
  </body>
</html>

Upvotes: 2

FluffyKitten
FluffyKitten

Reputation: 14312

The flex properties on the parent container (container in your example) don't pass down to the child elements, even if they are also containers. Therefore you also need to make the col divs display:flex, as follows:

.col  {
    flex: 1;
    display: flex;           /* make this a flex container so it has flex properties */
    justify-content: center; /* to horizontally center them in this flex display */
    /* REST OF YOUR CSS HERE */ 
}

Note that you also need to add flex: 1; to the content itself so it doesn't shrink, e.g.:

.col-item {
    flex: 1;
    /* REST OF YOUR CSS HERE */ 
}

Working Example with your code:

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
}

.col {
  flex: 1;
  background: orange;
  margin: 1px;
  display: flex;
  justify-content: center;
}

.col-item {
  flex: 1;
  margin: 15px;
}
<html>

<body>
  <div class="container">
    <div class="col">
      <div class="col-item" style="background: red;">
        <h2>Column 1</h2>
        <p>Hello World</p>

      </div>
    </div>
    <div class="col">
      <div class="col-item" style="background: red;">
        <h2>Column 2</h2>
        <p>Hello World!</p>
        <p>Hello World!</p>
        <p>Hello World!</p>
        <p>Hello World!</p>

      </div>
    </div>
    <div class="col">
      <div class="col-item" style="background: red;">
        <h2>Column 3</h2>
        <p>Some other text..</p>
        <p>Some other text..</p>
      </div>
    </div>
  </div>
</body>

</html>

Upvotes: 5

Related Questions