<div class="flex-box">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
</div>

body {margin-right: 15px}
.flex-box {
  margin:  auto;
  display: inline-flex;
  height: min-content;
  width: 100%;
  border: 4px solid royalblue;
 }
.item {
  flex: 0 0 calc(50px - 16px);
  width: calc(50px - 16px);
  border: 4px solid gold;
  margin: 4px 4px 4px 4px;
  text-align: center;
  padding: 10px;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-family: 'Google Sans', sans-serif;
}