я только начинаю учить html и css,можете подсказать пожалуйста, как сделать, чтобы при изменениях размера экрана, блоки, которые не вошли скрывались полностью, а не обрезались как сейчас у меня. Вот когда окно полностью открыто:
Вот мой код:
div.blocks {
display: flex;
flex-direction: row;
overflow: hidden;
}
.item {
padding: 16px;
margin-top: 16px;
border: 1px solid var(--tomato);
border-radius: 10px;
background-color: yellow;
text-align: center;
min-width: 80px;
flex-grow: 1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="Style.css">
</head>
<body>
<section>
<div class="blocks">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
</section>
</body>
</html>