CSS Keep All Flexbox Children Elements the Same Size

CSS Keep all flexbox children elements the same size

You have 2 ways of doing this:

flex-grow: 0 (fiddle)

If you set flex-grow to 0 you are telling the items to keep their width and expand the empty space. Using flex-grow: 1 the items will expand the width to fit the space.

invisible items (fiddle)

Add some invisible items after the normal items with the same flex properties. You will get a left aligned look.

In this solution there will be the same number of items in all visible rows so make sure to add enough invisible items to work properly on larger screens.

How to make flexbox items the same size?

Set them so that their flex-basis is 0 (so all elements have the same starting point), and allow them to grow:

flex: 1 1 0px

Your IDE or linter might mention that the unit of measure 'px' is redundant. If you leave it out (like: flex: 1 1 0), IE will not render this correctly. So the px is required to support Internet Explorer, as mentioned in the comments by @fabb;

How to make all children items the same height in the flexbox, as the one that changes its height?

by making the css property align-items set to stretch
align-items:stretch
, which is the default value of that property and if the flex direction is column just set the width of the child element to 100%, and if the direction is row set height of child to 100%

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

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>

Give equal height to children of elements within a flex container

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>

Make flex child equal height of parent inside of grid column

Add flex-grow : 1; to your .card rule. HTML markup is fine.

.row {
  display: flex; 
  flex-flow: row wrap; 
  background: #00e1ff;
  margin: -8px;
}
.col { 
  display: flex; 
  flex: 1 0 400px;
  flex-flow: column; 
  margin: 10px;
  background: grey;
}
.card {
  display: flex;
  padding: 20px;
  background: #002732;
  color: white;
  opacity: 0.5;
  align-items: stretch;
  flex-direction: column;
  flex-grow: 1;
}

You may also look at Foundation 6 Equalizer plugin. They use JavaScript though.

How to make all items the same width in a wrappable flexbox?

I want all items to have the same width, so I applied the following CSS attributes: flex-basis: 0 and flex-grow: 1.

That's a wrong approach. With flex-grow you are distributing free space in the container. Since the length of the content is different in each item, the free space will be different in each line. Hence, the columns won't align across rows, despite each item having flex-basis: 0.

With that, each item in every column should have had the same width, independently from its original width.

Actually, per the info I posted above, "With that, each item in every row should have had the same width, independently from its original width."

ul {  display: flex;  flex-wrap: wrap;  margin: 0;  padding: 0;}
li {  flex-basis: 0;  flex-grow: 1;  white-space: nowrap;  list-style-type: none;  border: 1px dashed red;}

<ul>  <li>Long name</li>  <li>Long name</li>  <li>Short name</li>  <li>Short name</li>  <li>Short name</li>  <li>Short name</li>  <li>Short name</li>  <li>Long name</li>  <li>Long long long name</li>  <li>Long name</li>  <li>Long name</li>  <li>Long long long name</li>  <li>Long long long name</li>  <li>Long long long name</li>  <li>Long long long name</li>  <li>Short name</li>  <li>Long name</li>  <li>Long long long name</li>  <li>Long long long name</li>  <li>Long name</li>  <li>Short name</li></ul>

---

Related Topics