Код, представленный ниже генерирует 5 элементов флексбокс. Как сделать так, чтобы ширина-высота этих элементов уменьшалась, если пользователь, например, уменьшить размер экрана браузера?
.container{
display: flex;
width: 1440px;
flex-flow: row wrap;
justify-content: center;
margin: 0 auto;
padding: 0;
}
.item{
width: 600px;
height: 400px;
background-color: blue;
margin: 2rem;
/*flex: 1 2 auto;*/
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>
<script src="main.js"></script>
</body>
</html>