CSS - Flexbox ,shrink items - css

Question

I have a flex box container, with a child element inside. When the screen size shrinks, I want the child to also shrink. Here is my existing code:
HTML:
<div class="container">
<div class="child"></div>
</div>
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.child {
width: 570px;
height: 500px;
background-color: red;
}
Does anyone know how to accomplish this? Thanks.
UPDATE:
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.child {
flex-basis: 200px;
width: 800px;
background-color: red;
}
UPDATE 2:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
max-width: 570px;
}
.child {
width: 100%;
height: 500px;
background-color: red;
}
Update number 3. Note this has not flex direction, therefore is column by default:
.container {
display: flex;
align-items: center;
justify-content: center;
padding: 0 20px;
}
.child {
background-color: red;
width: 800px;
height: 800px;
}

Answer 1

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.child {
background-color: red;
width: 80%;
max-width: 800px;
height: 800px;
}
<div class="container">
<div class="child"></div>
</div>

Answer 2

You can add a media query to accomplish what you aim:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
.child {
background-color: red;
width: 100%;
height: 800px;
}
#media screen and (min-width: 800px){
.container {
padding: 0 20px;
}
.child {
width: 800px;
}
}

Answer 3

Here is one just set the width of the .container to 100% of its container or body so when when the body shrinks also the width of .container reduced and give the .child 50% of its width
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 50vh;
}
.child {
position: relative;
width: 50%;
height: 100%;
background-color: red;
}
<div class="container">
<div class="child"></div>
</div>