Html 弯曲方向柱没有响应

我在响应模式下遇到了

flex-direction:column

的问题。当我将

flex-direction:column

写入

.container

时，它没有像

flex-direction:row

那样包装到响应，而是超出了布局。如何解决这个问题

   <div class="content">
     <div class="container">

       <div class="box">First Name Man</div>
              <div class="box">First Name Man</div>
       <div class="box">First Name Man</div>
       <div class="box">First Name Man</div>

     </div>
   </div>

---

您对

.box

（700px）有固定的

宽度设置。在媒体查询中将其更改为
width:calc（100%-20px）
（即左边和右边距的全宽减去20px），然后它将根据需要工作。
代码笔中的代码非常感谢，并且是任何其他只使用flexbox来匹配方框的方法，是否？在使用
flex-direction:column
时，不应该使用固定宽度。Fixed是固定的（并且没有响应）…因为在flex方向行工作得很好，但在flex方向列中容器div不工作，而内容div工作，不过非常感谢这个技巧
.content {
  width: 100%;
  min-height: 800px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex-wrap: wrap;
  background-color: whitesmoke;
}


.container {
  width: 100%;
  min-height: 500px;
   display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex-wrap: wrap;

}

.box {
  width:700px;
  margin: 10px;
  color:white;
  min-height: 70px;

  display: flex;
  align-items: center;
  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

  justify-content: space-around;
  background-color: indigo;
  flex-direction: column;
  flex-wrap: wrap;
}