Remove remaining space in flexbox with wrap - html

Question

How to reduce the width of the flexbox container with the wrap option so it takes only the width taken by its items ?
The objective is not to see any green at the right of the yellow boxes (except for the margin set on the box item)
NOTE: The flexbox with wrap can accept more than 2 items per row, in function of the window's size.
main {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 900px; /* This width changes with the window's size */
background-color: red;
}
.list {
display: flex;
flex-wrap: wrap;
background-color: green;
justify-content: flex-start;
}
.list .box {
width: 300px; /* This will never change */
height: 300px;
margin: 0 32px 32px 0;
display: flex;
align-items: center;
justify-content: center;
background-color: yellow;
}
<main>
<h1>Titre ici</h1>
<div class="list">
<div class="box">box</div>
<div class="box">box</div>
<div class="box">box</div>
<div class="box">box</div>
</div>
</main>
Link to Codepen

Answer 1

I want to show you an alternative with css-grid and using the attribute minmax. I believe that will be closer to that what you want.
It will give every box a width of at least 300px and will fit as many boxes as possible. If space is left, then box size will improve to fit the space unless another box would fit.
To do that we have to add: grid-template-columns: repeat(auto-fit, minmax(300px, 1fr) );
That css line will add the columns amount. repeat means, that the the adding of a column is repeated according to the following rules:
auto-fit: It has to fit the screen width without leaving an empty space. it will resize the 1fr to make it possible.
minmax(300px, 1fr) means that every fraction needs to be at least 300px. If the screen is larger, then the first rule will apply again and the 1fr will be resized accordingly.
body {
margin: 0;
padding: 0;
width: 900px;
}
h1 {
background-color: red;
height: auto;
margin: 0;
}
.list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr) );
grid-auto-rows: auto;
grid-gap: 32px;
background-color: green;
}
.box {
min-height: 300px;
background-color: yellow;
}
<main>
<h1>Titre ici</h1>
<div class="list">
<div class="box">box</div>
<div class="box">box</div>
<div class="box">box</div>
<div class="box">box</div>
</div>
</main>

Answer 2

The answers given are correct,
You can try this as a different alternative.
* {
box-sizing: border-box;
}
main {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 900px;
/* emulate high width */
background-color: red;
}
.list {
background-color: green;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.list .box-wrapper {
width: 300px;
height: 300px;
display: flex;
}
.list .box {
width: 100%;
margin: 0 16px 16px 0;
display: flex;
align-items: center;
justify-content: center;
background-color: yellow;
}
<main>
<h1>Titre ici</h1>
<div class="list">
<div class="box-wrapper">
<div class="box">
box
</div>
</div>
<div class="box-wrapper">
<div class="box">
box
</div>
</div>
<div class="box-wrapper">
<div class="box">
box
</div>
</div>
<div class="box-wrapper">
<div class="box">
box
</div>
</div>
</div>
</main>

Answer 3

I just commented out the margin on the .box and .list and replace flex-start with space-between on justify-content property and thereafter just added two smaller lines to format it well which are column-gap and row-gap to enerlarge the space between them
Example
main {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 900px;
/* emulate high width */
background-color: red;
}
.list {
display: flex;
flex-wrap: wrap;
background-color: green;
justify-content: space-between;
column-gap: 1px;
row-gap: 25px;
}
.list .box {
width: 300px;
height: 300px;
/*margin: 0 150px 32px 0;*/
display: flex;
align-items: center;
justify-content: center;
background-color: yellow;
}
<main>
<h1>Titre ici</h1>
<div class="list">
<div class="box">box</div>
<div class="box">box</div>
<div class="box">box</div>
<div class="box">box</div>
</div>
</main>