Вложенные элементы управления Flex и Grid и автоматическое переполнение ⇐ CSS

[Anonymous]

Этот код работает почти так, как я хочу: когда высота основного контейнера уменьшается, описание сначала становится прокручиваемым и уменьшается до минимальной высоты, а затем основной контейнер становится прокручиваемым.
Я хочу сохранить это поведение, однако, когда высота превышает «предпочтительную» высоту, необходимую для отображения всего без прокрутки, я бы хотел, чтобы элементы управления появлялись чуть ниже описания.
Сейчас они повторно сдвинут вниз к нижней части основного div.
Я пробовал различные комбинации гибких настроек, но все они либо не решают проблему, либо нарушают поведение каскадной прокрутки.
HTML:




Articles sélectionnés



Some Product



Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.




Plein tarif
Etudiant | AVS








989.00 CHF




12 x 89.00 CHF








Continuer






Total à régler:


989.00 CHFTVA comprise




PayerPayerRégler sur facture





CSS:
*,
::after,
::before {
box-sizing: border-box;
}

main.pm-main {
width: 32em;
/* At 32em, there is unwanted vertical space below the description */
/* height: 32em; */
height: 14em;
flex: 1;
display: flex;
flex-direction: column;
overflow-y: auto;
padding-right: 0.25rem;
padding-left: 0.25rem;
padding-bottom: 0.75rem;
margin-right: auto;
margin-left: auto;
position: relative;
}

.pm-cart {
overflow-y: hidden;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: auto;
row-gap: 1rem;
column-gap: 1rem;
}

.pm-cart-checkout {
border-radius: 0.375rem;
padding: 0.5rem 0.5rem;
display: flex;
flex-direction: column;
align-items: stretch;
}

.pm-cart-checkout > .pm-scroll-wrapper {
flex: 1 0 max-content;
}

.pm-cart-item {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
row-gap: 0.5em;
align-items: stretch;
width: 100%;
justify-content: start;
padding: 1rem 0.5rem;
border-top: 0 solid rgba(0, 0, 0, 0.4);
}

.pm-cart-item > div:not(.pm-short-description) {
flex: 0 1 0;
display: flex;
justify-content: space-between;
align-items: start;
row-gap: 0.5rem;
column-gap: 0.5rem;
}

.pm-short-description {
flex: 1 1 0;
display: flex;
flex-direction: column;
white-space: normal;
font-weight: normal;
font-style: italic;
overflow-y: auto;
font-size: 0.9em;
min-height: 4em;
}

.pm-scroll-wrapper {
overflow-y: hidden;
}

main > .pm-scroll-wrapper {
flex: 1 0 max-content;
}

h5,
h6 {
margin-top: 0;
margin-bottom: 0.5rem;
font-weight: 500;
line-height: 1.2;
}

h5 {
font-size: 1.25rem;
}

h6 {
font-size: 1rem;
}

p {
margin-top: 0;
margin-bottom: 1rem;
}

small {
font-size: 0.875em;
}

.d-flex {
display: flex !important;
}

.w-100 {
width: 100% !important;
}

.flex-column {
flex-direction: column !important;
}

.flex-grow-0 {
flex-grow: 0 !important;
}

.flex-wrap {
flex-wrap: wrap !important;
}

.justify-content-end {
justify-content: flex-end !important;
}

.align-self-end {
align-self: flex-end !important;
}

.row-gap-2 {
row-gap: 0.5rem !important;
}

.text-end {
text-align: right !important;
}

.text-nowrap {
white-space: nowrap !important;
}

.col-gap-1 {
column-gap: 0.25rem;
}

.col-gap-2 {
column-gap: 0.5rem;
}

.row-gap-2 {
row-gap: 0.5rem;
}

.pm-cart h5,
.pm-cart h6 {
margin-bottom: 0;
}

.pm-cart-item h6 {
font-size: 1rem;
font-weight: 600;
}

.pm-mobile .pm-cart-item h6 {
font-size: 14px;
}

.cart-total {
display: flex;
flex-direction: column;
align-content: end;
}

.cart-total::after {
content: "";
display: block;
border-top: 0.5px solid #aaa;
margin: 1rem 2rem;
}

.pm-pricing-levels {
display: flex;
justify-content: start;
align-items: start;
}

.pm-mobile .pm-pricing-levels {
font-size: 14px;
}

/*! CSS Used from: Embedded */
.minus-plus {
border: 1px solid silver;
border-radius: 5px;
background-color: #fff;
display: inline-block;
white-space: nowrap;
user-select: none;
}

.pm-mobile .minus-plus {
font-size: 14px;
}

.minus-plus div {
display: inline-block;
}

.minus-plus #field_container input {
width: 2rem;
background-color: #fff;
text-align: center;
padding: 0.15rem;
border: none;
}

.minus-plus .minus-plus-btn {
padding: 3px 10px 3px 10px;
border-radius: 5px;
}

.minus-plus:not(.pm-disabled) .minus-plus-btn {
cursor: pointer;
}

.minus-plus:not(.pm-disabled) .minus-plus-btn:hover {
background-color: #ddd;
}

.minus-plus:not(.pm-disabled) .minus-plus-btn:active {
background-color: #c5c5c5;
}

.ep-price {
display: flex;
align-items: center;
white-space: nowrap;
}

h6.ep-price {
margin-bottom: 0;
margin-top: 0;
}

.pm-price-badge {
column-gap: 0.5em;
display: grid;
grid-template-columns: repeat(3, min-content);
row-gap: 0.25em;
}


Подробнее здесь: https://stackoverflow.com/questions/793 ... low-y-auto