Заполните вертикальное пространство с помощью Flexbox в списке элементов

Question

У меня есть список элементов, каждый в display: flex для позиционирования своих дочерних элементов.Высота элемента задается изображением, а кнопка в правильном положении должна заполнять вертикальное пространство элемента.Но я не могу этого сделать.

.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>

Любая идея будет приветствоваться!

Answer 1

Элемент flex по умолчанию растягивается вдоль поперечной оси контейнера, поэтому единственное, что вам нужно, чтобы визуально растянуть кнопку, это сделать контейнер кнопки гибким контейнером, добавив display: flex к .Main-buttonWrapper.

Answer 2

Когда вы создаете флекс-контейнер, вступают в игру различные флекс-правила по умолчанию.

Два из этих правил по умолчанию: flex-direction: row и align-items: stretch.Это означает, что гибкие элементы будут автоматически выравниваться в одной строке, и каждый элемент будет заполнять высоту контейнера.

Если вы измените значение align-items, например, flex-start, это изменит значение по умолчанию.Поведение также растягивается, если вы устанавливаете определенную высоту для дочернего элемента гибкого контейнера.

Так что просто удалите height: 100% из .Main-buttonWrapper, и он будет иметь поведение по умолчанию.

Для лучшего понимания посмотрите этот ответ: https://stackoverflow.com/a/33220564/4966662

Answer 3

Я дал высоту Main-item + align-items:stretch;.Я надеюсь, что это то, что вам нужно.

.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>