Width of container is not setting properly using flexbox-CodePudding

I want my flexbox container to be of same width as the above one, but whenever I am adding a left/right padding to the container it increases the width. Let me know how do I handle padding in flexbox.

* { margin: 0; padding: 0; }
html, body{ box-sizing: border: box; width: 100%; }

.container { padding: 20px; }

.container.flex { 
  display: flex; 
  width: 100%; 
  border: 1px solid red;
  padding: 20px 0;
  /* Adding Padding left and right 20px is adding a scroller */
  gap: 20px;
}

.container.flex .box { flex-basis: 100%; }

.one { background: #80558C; }
.two { background: #AF7AB3; }
.three { background: #CBA0AE; }
.four { background: #E4D192; }
.five { background: #576F72; }

<div >
  <div >Box 1</div>
  <div >Box 2</div>
  <div >Box 3</div>
  <div >Box 4</div>
  <div >Box 5</div>
</div>

<div >
  <div >Box 1</div>
  <div >Box 2</div>
  <div >Box 3</div>
  <div >Box 4</div>
  <div >Box 5</div>
</div>

CodePudding user response：

You could just reduce the width by the amount of padding you added, or the simpler way of adding box-sizing: border-box; to that flexbox.

* { margin: 0; padding: 0; }
html, body{ box-sizing: border-box; width: 100%; }

.container { padding: 20px; }

.container.flex { 
  display: flex; 
  width: 100%; 
  border: 1px solid red;
  padding: 20px 0;
  box-sizing: border-box;
  /* Adding Padding left and right 20px is adding a scroller */
  gap: 20px;
}

.container.flex .box { flex-basis: 100%; }

.one { background: #80558C; }
.two { background: #AF7AB3; }
.three { background: #CBA0AE; }
.four { background: #E4D192; }
.five { background: #576F72; }

<div >
  <div >Box 1</div>
  <div >Box 2</div>
  <div >Box 3</div>
  <div >Box 4</div>
  <div >Box 5</div>
</div>

<div >
  <div >Box 1</div>
  <div >Box 2</div>
  <div >Box 3</div>
  <div >Box 4</div>
  <div >Box 5</div>
</div>

CodePudding user response：

adding box-sizing will fix the issue.

* { margin: 0; padding: 0; box-sizing: border-box;}

* { margin: 0; padding: 0; box-sizing: border-box;}
html, body{ }

.container { padding: 20px; }

.container.flex { 
  display: flex; 
  width: 100%; 
  border: 1px solid red;
  padding: 20px 0;
  /* Adding Padding left and right 20px is adding a scroller */
  gap: 20px;
}

.container.flex .box { flex-basis: 100%; }

.one { background: #80558C; }
.two { background: #AF7AB3; }
.three { background: #CBA0AE; }
.four { background: #E4D192; }
.five { background: #576F72; }

<div >
  <div >Box 1</div>
  <div >Box 2</div>
  <div >Box 3</div>
  <div >Box 4</div>
  <div >Box 5</div>
</div>

<div >
  <div >Box 1</div>
  <div >Box 2</div>
  <div >Box 3</div>
  <div >Box 4</div>
  <div >Box 5</div>
</div>

CodePudding user response：

To match the container width and the starting position of my flex container, I have added a margin-left: 20px which shift the container to the left by 20px.

Now to have a space from the right, I adjusted the width of the container, like - width: calc(100% - 40px);.

Working Code -

* { margin: 0; padding: 0; box-sizing: border: box; }
html, body{ width: 100%; }

.container { padding: 20px; }

.container.flex { 
  display: flex; 
  width: calc(100% - 40px); 
  border: 1px solid red;
  padding: 20px 0;
  margin-left: 20px;
  gap: 20px;
}

.container.flex .box { flex-basis: 100%; text-align: center; }

.one { background: #80558C; }
.two { background: #AF7AB3; }
.three { background: #CBA0AE; }
.four { background: #E4D192; }
.five { background: #576F72; }

  <div >
  <div >Box 1</div>
  <div >Box 2</div>
  <div >Box 3</div>
  <div >Box 4</div>
  <div >Box 5</div>
</div>

<div >
  <div >Box 1</div>
  <div >Box 2</div>
  <div >Box 3</div>
  <div >Box 4</div>
  <div >Box 5</div>
</div>