flex-direction 列无响应

Question

I am facing a problem with flex-direction: column on responsive mode. When I write flex-direction: column to .container its not wrapping to responsive like flex-direction: row , it's going outside of the layout. How to fix that?

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

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

Answer 1

You have a fixed width setting for .box (700px). Change that to width: calc(100% - 20px) (ie full width minus 20px for the margin left and right) in a media query, then it will work as desired.