How to shrink container in flexbox-CodePudding

I want my container to shrink when page is smaller. How can i do that?

.home-container {
  display: flex;
  flex-direction: column;
  background-color: #ffefd0;
  border-radius: 15px;
  box-shadow: 3px 3px 3px 1px grey;
  margin: 30px auto 0 auto;
  width: 800px;
}

CodePudding user response：

Don't use a set width. It's best to avoid setting height and width (when possible) to avoid problems with responsiveness. Instead of width, use max-width: 800px.

CodePudding user response：

Do not provide width property as you have passed it ... instead add padding to that container accordingly and set width property to max-width like this

.home-container {
  display: flex;
  flex-direction: column;
  background-color: #ffefd0;
  border-radius: 15px;
  box-shadow: 3px 3px 3px 1px grey;
  margin: 30px auto 0 auto;
  padding:20px;
  width: max-width;
}

CodePudding user response：

maybe like this ??

.home-container {
  display: flex;
  flex-direction: column;
  background-color: #ffefd0;
  border-radius: 15px;
  box-shadow: 3px 3px 3px 1px grey;
  margin: 30px auto 0 auto;
  max-width: 800px;
  grid-gap:10px;
  height:auto;
 }
 
.box {
  height:80px;
  width:80px;
  margin:20px;
  background-color:blue;
  border:1px solid gray;
  
  }

<div >
  <div >
  </div>
  
  <div >
  </div>
  
  <div >
  </div>
  
  <div >
  </div>
</div>