Shrink Flex in CSS does not shrink at max level-CodePudding

I am trying to shrink my div element at its maximum level.But at some point it does shrink and overflow from the container.

@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Roboto", sans-serif;
  min-height: 100vh;
  padding: 20px;
}

.container {
  min-height: 400px;
  max-width: 800px;
  margin-inline: auto;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  gap: 1rem;
  align-items: center;
  flex-flow: row nowrap;
  align-content: space-evenly;
}

.box {
  /* min-width:100px; */
  height: 100px;
  background-color: black;
  color: yellow;
  font-size: 2rem;
  padding: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 1 50px;
}

<h1>Hello Flex</h1>
<main >
  <div >1</div>
  <div >2</div>
  <div >3</div>
  <div >4</div>
  <div >5</div>
  <div >6</div>
</main>

Please guide me how can I resolve this issue that at extreme minimum position my div elements did not overflow from my container.

I've attached the image of my result at extreme minimum position my div element overflow from the container.enter image description here

CodePudding user response：

You're probably looking for overflow:

@media (max-width: 300px) {
  .container {
    overflow: auto;
    justify-content: flex-start;
  }
}