Как использовать CSS Flex для расширения изображений на паряке, но только по вертикали, а не горизонтально ⇐ CSS

[Anonymous]

Есть этот элемент карты, и у него есть два раздела, один для изображения и другой раздел, действующий как описание для изображения. Я хочу, чтобы изображение расширилось вниз, когда пользователь колеблется на одной из карт (как способ показать это изображение более заметно). Я сделал этот переход, и я сделал это, увеличив гибкость на паряке: < /p>
.card:hover .picture-section{
flex:3;
}
< /code>
И это частично работало. Тем не менее, изображение расширяется вниз правильно, но также расширяется горизонтально (не карта, а само изображение вроде как увеличивает). Я понятия не имею, как/почему, поскольку направление гибки - столбец (также я вроде как новичок в этом).
Я пробовал много вещей, как, вместо гибки, я попробовал с изменением высоты. Я пытался изменить мин, максимум, ширина изображения, но, казалось, ничего не сработало, за исключением изменения ширины самой карты. Тем не менее, я не хочу это менять. < /P>




.cards {
display: flex;
flex-wrap: wrap;
gap: 4rem;
}

.card {
height: 15rem;
width: 12rem;
border: 2px solid blue;
display: flex;
flex-direction: column;
}

.card .picture-section {
border: 2px solid black;
flex: 1;
flex-wrap: wrap;

min-height: 0;
transition: all 0.5s;
}

.card .picture-section img {
object-fit: cover;
width: 100%;
height: 100%;
min-width: 0;
transition: all 0.5s;

}

.card:hover .picture-section {
flex: 3;
}

.card .card-text {
border: 2px solid red;
flex: 1.5;
}
< /code>





Emmanuel Jean Joseph






Emmanuel Jean Joseph




















< /code>
< /div>
< /div>

< /code>

Подробнее здесь: https://stackoverflow.com/questions/796 ... nd-not-hor