CSS - Flexbox ，收缩项目

Question

我有一个弹性盒子容器，里面有一个子元素。当屏幕尺寸缩小时，我希望孩子也缩小。这是我现有的代码：

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

有谁知道如何做到这一点？谢谢。

更新：

.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

您可以添加媒体查询来完成您的目标：

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