Переполнение CSS не работает с flex-grow или шириной/высотой в процентах
Я столкнулся с непонятной для меня проблемой переполнения CSS.
css:
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
display: flex;
flex-direction: column;
font-weight: 400;
font-family: 'Arial';
}
.simulations {
display: flex;
width: 80%;
margin: auto;
padding: 5px 10px;
margin-top: 50px;
border-radius: 20px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.waiting-list {
flex-grow: 1;
}
.waiting-list h3 {
text-align: center;
}
.waiting-list .list {
display: flex;
margin-top: 10px;
padding: 0px 5px 5px 5px;
overflow-x: scroll;
}
.waiting-list .list .element {
width: 200px;
text-align: center;
border-radius: 20px;
border: 2px solid black;
}
.button {
display: flex;
margin-left: 10px;
}
.button img {
margin: auto;
width: 30px;
cursor: pointer;
}
HTML (я использую Django):
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="{% static 'css/test.css' %}">
</head>
<body>
<div class="simulations">
<div class="waiting-list">
<h3>Waiting list</h3>
<div class="list">
{% for i in "x"|rjust:"10" %}
<div>
<div class="element">
<h4>Title</h4>
<p>size</p>
</div>
</div>
{% endfor %}
</div>
</div>
<div class="button">
<img src="https://img.icons8.com/external-prettycons-lineal-prettycons/49/000000/external-enter-essentials-prettycons-lineal-prettycons.png"/>
</div>
</div>
</body>
</html>
Как видно на рисунке, класс списка ожидания заходит за кнопку вместо того, чтобы переливаться по оси x и удерживать правую кнопку на том месте, где она должна быть. Когда я применяю свойства ширины к классу списка ожидания, он работает отлично, но он больше не реагирует на размер скррена.
У вас есть идеи, как решить эту проблему?