Fill vertical space with Flexbox in a list of items

Question

I have a list of items, each one in display: flex to position its children elements. The height of the item is given by the image, and the button at the right position should fill the vertical space of the item. But I can't do that.

.Main-item {
    display: flex;
    border: 1px solid gray; 
    margin-bottom: 2px;
}

.Main-img {
    height: 50px;
    width: 50px;
    overflow: hidden;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
}

.Main-name {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-start;
    flex: 1 1;
    padding: 0 10px;
}

.Main-buttonWrapper {
    height: 100%;
    width: 146px;
}

.Main-button {
    height: 100%;
    width: 100%;
}

<div>
 <div class="Main-item">
  <img class="Main-img" src="https://picsum.photos/200/300" />
  <div class="Main-name">Lorem ipsum</div>
  <div class="Main-buttonWrapper"><button class="Main-button">button</button></div>
 </div>
 <div class="Main-item">
  <img class="Main-img" src="https://picsum.photos/200/300" />
  <div class="Main-name">Lorem ipsum</div>
  <div class="Main-buttonWrapper"><button class="Main-button">button</button></div>
 </div>
 <div class="Main-item">
  <img class="Main-img" src="https://picsum.photos/200/300" />
  <div class="Main-name">Lorem ipsum</div>
  <div class="Main-buttonWrapper"><button class="Main-button">button</button></div>
 </div>
 <div class="Main-item">
  <img class="Main-img" src="https://picsum.photos/200/300" />
  <div class="Main-name">Lorem ipsum</div>
  <div class="Main-buttonWrapper"><button class="Main-button">button</button></div>
 </div>
</div>

Any idea will be welcome!

Your question is vague. "I have a list of items, each one in display: flex to position its children elements. This elements should fill the vertical space" -- which elements should fill the vertical space? The items of the list or the children elements of every item of the list? — Armen Michaeli, Nov 21 '18 at 15:15
I must be missing something, because removing `height` rule from `.Main-buttonWrapper` doesn't make your button occupy item height. — Armen Michaeli, Nov 21 '18 at 15:28
I provide an answer to give you an idea of why it happens and not only how to fix it. — Yandy_Viera, Nov 21 '18 at 15:46

score 1 · Accepted Answer · answered Nov 21 '18 at 15:43

When you create a flex container various default flex rules come into play.

Two of these default rules are flex-direction: row and align-items: stretch. This means that flex items will automatically align in a single row, and each item will fill the height of the container.

If you change the value of align-items to for example flex-start it will change the default behavior 'stretch' as well if you set a specific height to the child of a flex container.

So just remove the height: 100% from .Main-buttonWrapper and it will have the default behavior.

For a better understanding look this answer: https://stackoverflow.com/a/33220564/4966662

enxaneta · Answer 2 · 2018-11-21T15:34:19.623

I've given a height to the Main-item + align-items:stretch;. I hope this is what you need.

.Main-item {
    align-items:stretch;
    height: 50px;
}

.Main-element {
    padding-top: 16px;
}

.Main-item {
    display: flex;
    border: 1px solid gray; 
    margin-bottom: 2px;
    align-items:stretch;
    height: 50px;
}

.Main-img {
    width: 50px;
    overflow: hidden;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
}

.Main-name {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-start;
    flex: 1 1;
    padding: 0 10px;
}



.Main-buttonWrapper {
    width: 146px;
}

.Main-button {
    width: 100%;
    height: 100%;
}

<div class="Main-element">
 <div class="Main-item">
  <img class="Main-img" src="https://picsum.photos/200/300" />
  <div class="Main-name">Lorem ipsum</div>
  <div class="Main-buttonWrapper"><button class="Main-button">button</button></div>
 </div>
 <div class="Main-item">
  <img class="Main-img" src="https://picsum.photos/200/300" />
  <div class="Main-name">Lorem ipsum</div>
  <div class="Main-buttonWrapper"><button class="Main-button">button</button></div>
 </div>
 <div class="Main-item">
  <img class="Main-img" src="https://picsum.photos/200/300" />
  <div class="Main-name">Lorem ipsum</div>
  <div class="Main-buttonWrapper"><button class="Main-button">button</button></div>
 </div>
 <div class="Main-item">
  <img class="Main-img" src="https://picsum.photos/200/300" />
  <div class="Main-name">Lorem ipsum</div>
  <div class="Main-buttonWrapper"><button class="Main-button">button</button></div>
 </div>
</div>

Thanks @enxaneta; what I'm trying to do is to make the button fill the vertical space, not to align it in the center. — , Nov 21 '18 at 15:22

Armen Michaeli · Answer 3 · 2018-11-23T00:00:05.053

0

A flex item stretches along the container cross axis by default, so the only thing you need to make the button stretch visually as well, is to make the button container a flex container by adding display: flex to .Main-buttonWrapper.

edited Nov 23 '18 at 00:00

answered Nov 21 '18 at 15:25

Armen Michaeli

8,625
8
58
95

Fill vertical space with Flexbox in a list of items

3 Answers3