CSS - Flexbox, термоусадочные изделия

Question

У меня есть контейнер flex box с дочерним элементом внутри. Когда размер экрана уменьшается, я хочу, чтобы ребенок тоже уменьшился. Вот мой существующий код:

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;
}

Кто-нибудь знает, как выполнить sh это? Спасибо.

ОБНОВЛЕНИЕ :

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.child {
    flex-basis: 200px;
    width: 800px;
    background-color: red;
}

ОБНОВЛЕНИЕ 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;
}

Обновление номер 3. Обратите внимание, что это не направление изгиба, поэтому по умолчанию столбец:

.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

Вы можете добавить медиа-запрос для достижения sh цели:

* {
 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

Здесь просто установите ширину .container на 100% своего контейнера или body, поэтому, когда тело сжимается, ширина .container уменьшается и дает .child 50% из его 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>