How can I get even heights of unknown elements inside a column?

Question

I'm using flex to create even columns and vh to make them the same height. That's working fine but inside the columns I can have an x number of items in them. I'd like for elements in each column to be even height depending on how many items are present (using css).

1 = 100% 2 = 50% 3 = 33.33% etc.

I know I can do this through JS but I'd like to automate this through css via flex, grid, or something elese.

Please post the code snippet as well. – Saurav Rastogi Nov 09 '17 at 16:22 — Saurav Rastogi, Nov 09 '17 at 16:22

score 2 · Answer 1 · answered Nov 09 '17 at 16:30

I've tried replicating your problem. Use flex: 1 on .items so that each and every item take equal space (according to the problem statement).

Have a look at the snippet below:

body {
  margin: 0;
}

.parent {
  width: 80%;
  padding: 20px;
  display: flex;
  border: 1px solid red;
}

.child {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  padding: 20px;
  border: 1px solid blue;
  height: 60vh;
}

.item {
  flex: 1;
  background: lightGreen;
  border: 1px solid green;
}

<div class="parent">
  <div class="child">
    <div class="item">33.33%</div>
    <div class="item">33.33%</div>
    <div class="item">33.33%</div>
  </div>
  <div class="child">
    <div class="item">50%</div>
    <div class="item">50%</div>
  </div>
  <div class="child">
    <div class="item">100%</div>
  </div>
</div>

Hope this is what you are trying to achieve.

VXp · Answer 2 · 2018-06-13T22:18:23.400

This is all you need to make it work with the Flexbox:

.flex-container {
  display: flex;
}

.flex-item {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.item {
  flex: 1;
  border: 1px solid;
}

<div class="flex-container">
  <div class="flex-item">
    <div class="item">1/1</div>
  </div>
  <div class="flex-item">
    <div class="item">1/2</div>
    <div class="item">1/2</div>
  </div>
  <div class="flex-item">
    <div class="item">1/3</div>
    <div class="item">1/3</div>
    <div class="item">1/3</div>
  </div>
  <div class="flex-item">
    <div class="item">1/4</div>
    <div class="item">1/4</div>
    <div class="item">1/4</div>
    <div class="item">1/4</div>
  </div>
</div>

How can I get even heights of unknown elements inside a column?

2 Answers2