I have this markup. How do I make the height of a list with buttons float using CSS? And is it possible to do this without JS?
The height should not exceed the height of the screen.If the height of the button list is less than the height of the screen, then the button should stick to the list below.If the height of the list of buttons is greater than the height of the screen, then it should be scrollable, but the button should not be scrollable.
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title></head><body><div style=" padding: 48px 32px; display: flex; flex-direction: column; flex-grow: 1;"><p> Title:<span>some text</span></p><div style="display: flex; flex-direction: column; height: 100%"><div style="display: flex; flex-direction: column"><div><label data-shrink="false">Поиск</label><div><input aria-invalid="false" type="text" value="" /><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.9649 14.255H15.7549L20.7449 19.255L19.2549 20.745L14.2549 15.755V14.965L13.9849 14.685C12.8449 15.665 11.3649 16.255 9.75488 16.255C6.16488 16.255 3.25488 13.345 3.25488 9.755C3.25488 6.165 6.16488 3.255 9.75488 3.255C13.3449 3.255 16.2549 6.165 16.2549 9.755C16.2549 11.365 15.6649 12.845 14.6849 13.985L14.9649 14.255ZM5.25488 9.755C5.25488 12.245 7.26488 14.255 9.75488 14.255C12.2449 14.255 14.2549 12.245 14.2549 9.755C14.2549 7.26501 12.2449 5.255 9.75488 5.255C7.26488 5.255 5.25488 7.26501 5.25488 9.755Z" fill="currentColor"></path></svg><fieldset aria-hidden="true"><legend><span>Поиск</span></legend></fieldset></div></div><div><div><div role="progressbar" style="width: 40px; height: 40px"><svg><circle cx="44" cy="44" r="20.2" fill="none" stroke-width="3.6"></circle></svg></div></div><div style="display: flex; flex-direction: column; overflow: auto"><button tabindex="0" type="button"><span><div><p>Май 2024</p><div><p>22.03.2024</p></div></div></span><span></span></button><button tabindex="0" type="button"><span><div><p>Апрель 2024</p><div><p>20.03.2024</p></div></div></span><span></span></button><button tabindex="0" type="button"><span><div><p>Март 2024</p><div><p>20.03.2024</p></div></div></span><span></span></button><button tabindex="0" type="button"><span><div><p>Февраль 2024</p><div><p>20.03.2024</p></div></div></span><span></span></button><button tabindex="0" type="button"><span><div><p>Январь 2024</p><div><p>20.03.2024</p></div></div></span><span></span></button><button tabindex="0" type="button"><span><div><p>Июнь 2023</p><div><p>27.03.2024</p></div></div></span><span></span></button><button tabindex="0" type="button"><span><div><p>Май 2023</p><div><p>27.03.2024</p></div></div></span><span></span></button><button tabindex="0" type="button"><span><div><p>Апрель 2023</p><div><p>27.03.2024</p></div></div></span><span></span></button><button tabindex="0" type="button"><span><div><p>Март 2023</p><div><p>27.03.2024</p></div></div></span><span></span></button><button tabindex="0" type="button"><span><div><p>Февраль 2023</p><div><p>27.03.2024</p></div></div></span><span></span></button><button tabindex="0" type="button"><span><div><p>Январь 2023</p><div><p>27.03.2024</p></div></div></span><span></span></button><button tabindex="0" type="button"><span><div><p>Декабрь 2022</p><div><p>27.03.2024</p></div></div></span><span></span></button><button tabindex="0" type="button"><span><div><p>Ноябрь 2022</p><div><p>27.03.2024</p></div></div></span><span></span></button><button tabindex="0" type="button"><span><div><p>Октябрь 2022</p><div><p>27.03.2024</p></div></div></span><span></span></button><button tabindex="0" type="button"><span><div><p>Сентябрь 2022</p><div><p>27.03.2024</p></div></div></span><span></span></button><button tabindex="0" type="button"><span><div><p>Август 2022</p><div><p>27.03.2024</p></div></div></span><span></span></button><button tabindex="0" type="button"><span><div><p>Июль 2022</p><div><p>27.03.2024</p></div></div></span><span></span></button><button tabindex="0" type="button"><span><div><p>Июнь 2022</p><div><p>27.03.2024</p></div></div></span><span></span></button><button tabindex="0" type="button"><span><div><p>Май 2022</p><div><p>27.03.2024</p></div></div></span><span></span></button><button tabindex="0" type="button"><span><div><p>Апрель 2022</p><div><p>27.03.2024</p></div></div></span><span></span></button><button tabindex="0" type="button"><span><div><p>Март 2022</p><div><p>27.03.2024</p></div></div></span><span></span></button><button tabindex="0" type="button"><span><div><p>Февраль 2022</p><div><p>27.03.2024</p></div></div></span><span></span></button><button tabindex="0" type="button"><span><div><p>Январь 2022</p><div><p>27.03.2024</p></div></div></span><span></span></button><button tabindex="0" type="button"><span><div><p>Декабрь 2021</p><div><p>27.03.2024</p></div></div></span><span></span></button><button tabindex="0" type="button"><span><div><p>Ноябрь 2021</p><div><p>27.03.2024</p></div></div></span><span></span></button><button tabindex="0" type="button"><span><div><p>Октябрь 2021</p><div><p>27.03.2024</p></div></div></span><span></span></button><button tabindex="0" type="button"><span><div><p>Сентябрь 2021</p><div><p>27.03.2024</p></div></div></span><span></span></button><button tabindex="0" type="button"><span><div><p>Август 2021</p><div><p>27.03.2024</p></div></div></span><span></span></button><button tabindex="0" type="button"><span><div><p>Июль 2021</p><div><p>27.03.2024</p></div></div></span><span></span></button><button tabindex="0" type="button"><span><div><p>Июнь 2021</p><div><p>27.03.2024</p></div></div></span><span></span></button><button tabindex="0" type="button"><span><div><p>Май 2021</p><div><p>27.03.2024</p></div></div></span><span></span></button><button tabindex="0" type="button"><span><div><p>Апрель 2021</p><div><p>27.03.2024</p></div></div></span><span></span></button><button tabindex="0" type="button"><span><div><p>Март 2021</p><div><p>27.03.2024</p></div></div></span><span></span></button><button tabindex="0" type="button"><span><div><p>Февраль 2021</p><div><p>27.03.2024</p></div></div></span><span></span></button><button tabindex="0" type="button"><span><div><p>Январь 2021</p><div><p>27.03.2024</p></div></div></span><span></span></button><button tabindex="0" type="button"><span><div><p>Декабрь 2020</p><div><p>27.03.2024</p></div></div></span><span></span></button><button tabindex="0" type="button"><span><div><p>Ноябрь 2020</p><div><p>27.03.2024</p></div></div></span><span></span></button><button tabindex="0" type="button"><span><div><p>Октябрь 2020</p><div><p>27.03.2024</p></div></div></span><span></span></button><button tabindex="0" type="button"><span><div><p>Сентябрь 2020</p><div><p>27.03.2024</p></div></div></span><span></span></button><button tabindex="0" type="button"><span><div><p>Август 2020</p><div><p>27.03.2024</p></div></div></span><span></span></button><button tabindex="0" type="button"><span><div><p>Июль 2020</p><div><p>27.03.2024</p></div></div></span><span></span></button><button tabindex="0" type="button"><span><div><p>Июнь 2020</p><div><p>27.03.2024</p></div></div></span><span></span></button><button tabindex="0" type="button"><span><div><p>Май 2020</p><div><p>27.03.2024</p></div></div></span><span></span></button><button tabindex="0" type="button"><span><div><p>Апрель 2020</p><div><p>27.03.2024</p></div></div></span><span></span></button><button tabindex="0" type="button"><span><div><p>Март 2020</p><div><p>27.03.2024</p></div></div></span><span></span></button><button tabindex="0" type="button"><span><div><p>Февраль 2020</p><div><p>27.03.2024</p></div></div></span><span></span></button><button tabindex="0" type="button"><span><div><p>Январь 2020</p><div><p>27.03.2024</p></div></div></span><span></span></button></div></div></div><div style="align-self: center"><button tabindex="0" type="button">Создатьсрез</button></div></div></div></body></html>The only thing that worked was to calculate the height of the element with buttons and specify this value as "max-height". But I wouldn’t like to count the height, but I have a hunch that CSS can do it.