Shrink flex elements if window is too narrow - css

Question

I am using a flexbox on my site to display post previews as tiles. Each one is a fixed size (384*384px) and displays as a grid that fits as many tiles in each row as it can horizontally and it rearranges itself dynamically as the page is resized. This is the current CSS for this:
.post-list { display: flex; flex-wrap: wrap; }
.post-tile { flex: 0 0 384px; width: 384px; height: 384px; margin: 10px; padding: 30px; box-sizing: border-box; overflow: hidden; border-radius: 32px; }
I would like it to do one extra thing though if possible: If the window is narrower than the width of one of the tiles I would like it to resize the tiles down to fit in the screen while also keeping the height and width the same, but I don't know how to accomplish this.
Here is a JS Fiddle with this CSS filled out with a few basic tiles.

Answer 1

Currently you have it like this
flex: 0 0 384px
Change it to
flex: 0 1 384px
That second value is flex-shrink. It will solve the problem.

Answer 2

You are probably looking for flex-shrink: 1; which allows your item to shrink.
Note: You probably also want to play around with your padding for the .post-list element
See Example below
.post-list {
display: flex;
flex-wrap: wrap;
/*below two properties are for demonstration only*/
max-width: 200px;
border: 1px solid black;
}
.post-tile {
flex: 0 0 384px;
width: 384px;
height: 384px;
margin: 10px;
padding: 30px;
box-sizing: border-box;
overflow: hidden;
border-radius: 32px;
background-color:lightgrey;
flex-shrink: 1; /* this allows to shrink your item */
}
<ul class="post-list">
<li class="post-tile">
<h3>
Title 1
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</li>
<li class="post-tile">
<h3>
Title 2
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</li>
<li class="post-tile">
<h3>
Title 3
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</li>
<li class="post-tile">
<h3>
Title 4
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</li>
<li class="post-tile">
<h3>
Title 5
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</li>
</ul>