Как расположить объект в низу корзины и сделать правильный скрол?

Question

[N_ik_i_ta]

Здравствуйте, есть вот такая проблема, у блока с счётчиком и кнопками «Закрыть» и «Оформить». Когда добавляется прокручивание получается вот такое как на картинках. Мне нужно чтобы блок с счётчиком и кнопками, «Закрыть» и «Оформить» был всегда внизу корзины. Знаю, что есть вариант с position: fixed, но мне нужен другой способ. Есть на гит хабе сайт, вот ссылка: https://nikitaharp.github.io/Site/ , там код посмотрите, может чуть запутано потому, что я делал корзину по гайду из ютуба, помогите пожалуйста.

Картинки для того, чтобы объяснить, что я имею ввиду.

Comments

[Ankhena]

Гриды, флексы.

И позиционирование корзины имеет смысл поправить, сейчас уходит за верх окна.

Answer 1

[Загир Меджидов]

можно использовать display: flex и задать flex-direction: column;

вот примерный код:

<div class="basket__items">
   <div class="items">
   	items
   </div>
   <div class="basket">
   		basket
   </div>
</div>


<style>
	.basket__items {
    	display: flex;
        flex-direction: column;
        max-height: 150px;
        overflow-y: scroll;
    }
    
    .items {
    	min-height: 150px;
    }
</style>

Comments

[N_ik_i_ta]

Нашел я ответ, position: sticky, и top: (...)px, выставить так чтобы он был внизу нужного блока, может у кого-то будет такая же проблема.