Conflict with flex-item and overflow and width

Question

.flex-gap {
  --gap: 12px;
  display: flex;
  flex-wrap: wrap;
  margin: calc(-1 * var(--gap)) 0 0 calc(-1 * var(--gap));
  width: calc(100% + var(--gap));
}
.flex-gap > * {
  margin: var(--gap) 0 0 var(--gap);
  flex: 1 1 calc(16.6666666667% - 1rem + 0.1666666667rem);
  background: pink;
}

.o-table-container {
  overflow-x: auto;
 }

  <div class="flex-gap">
    <div class="flex-gap__item">
      <div class="o-table-container">
        <table>
          <thead><tr><th></th>
            <th>item1</th>
            <th>item2</th>
            <th>item3</th>
            <th>item4</th>
            <th>item5</th>
            <th>item6</th>
            <th>item7</th>
            <th>item8</th>
            <th>item9</th>
            <th>item10</th>
            <th>item11</th>
            <th>item12</th>
            <th>item13</th>
          </tr>
        </thead>
          <tbody>
            <tr>
              <td>Lorem Ipsum</td>
              <td>Lorem Ipsum</td>
              <td>Lorem Ipsum</td>
              <td>Lorem Ipsum</td>
              <td>Lorem Ipsum</td>
              <td>Lorem Ipsum</td>
              <td>Lorem Ipsum</td>
              <td>Lorem Ipsum</td>
              <td>Lorem Ipsum</td>
              <td>Lorem Ipsum</td>
              <td>Lorem Ipsum</td>
              <td>Lorem Ipsum</td>
              <td>Lorem Ipsum</td>
              <td>Lorem Ipsum</td>
            </tr>
            <tr>
              <td>Lorem Ipsum</td>
              <td>Lorem Ipsum</td>
              <td>Lorem Ipsum</td>
              <td>Lorem Ipsum</td>
              <td>Lorem Ipsum</td>
              <td>Lorem Ipsum</td>
              <td>Lorem Ipsum</td>
              <td>Lorem Ipsum</td>
              <td>Lorem Ipsum</td>
              <td>Lorem Ipsum</td>
              <td>Lorem Ipsum</td>
              <td>Lorem Ipsum</td>
              <td>Lorem Ipsum</td>
              <td>Lorem Ipsum</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="flex-gap__item">2</div>
    <div class="flex-gap__item">3</div>
    <div class="flex-gap__item">4</div>
    <div class="flex-gap__item">5</div>
    <div class="flex-gap__item">6</div>
  </div>

I have this HTML code:

  <div class="flex-gap">
<div class="flex-gap__item">
  <div class="o-table-container">
    <table>
      <thead><tr><th></th>
        <th>item1</th>
        <th>item2</th>
        <th>item3</th>
        <th>item4</th>
        <th>item5</th>
        <th>item6</th>
        <th>item7</th>
        <th>item8</th>
        <th>item9</th>
        <th>item10</th>
        <th>item11</th>
        <th>item12</th>
        <th>item13</th>
      </tr>
    </thead>
      <tbody>
        <tr>
          <td>Lorem Ipsum</td>
          <td>Lorem Ipsum</td>
          <td>Lorem Ipsum</td>
          <td>Lorem Ipsum</td>
          <td>Lorem Ipsum</td>
          <td>Lorem Ipsum</td>
          <td>Lorem Ipsum</td>
          <td>Lorem Ipsum</td>
          <td>Lorem Ipsum</td>
          <td>Lorem Ipsum</td>
          <td>Lorem Ipsum</td>
          <td>Lorem Ipsum</td>
          <td>Lorem Ipsum</td>
          <td>Lorem Ipsum</td>
        </tr>
        <tr>
          <td>Lorem Ipsum</td>
          <td>Lorem Ipsum</td>
          <td>Lorem Ipsum</td>
          <td>Lorem Ipsum</td>
          <td>Lorem Ipsum</td>
          <td>Lorem Ipsum</td>
          <td>Lorem Ipsum</td>
          <td>Lorem Ipsum</td>
          <td>Lorem Ipsum</td>
          <td>Lorem Ipsum</td>
          <td>Lorem Ipsum</td>
          <td>Lorem Ipsum</td>
          <td>Lorem Ipsum</td>
          <td>Lorem Ipsum</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
<div class="flex-gap__item">2</div>
<div class="flex-gap__item">3</div>
<div class="flex-gap__item">4</div>
<div class="flex-gap__item">5</div>
<div class="flex-gap__item">6</div>

I have this scss code:

o-table-container {
   overflow-x: auto
}



.flex-gap {
  --gap: 12px;
  display: flex;
  flex-wrap: wrap;
  margin: calc(-1 * var(--gap)) 0 0 calc(-1 * var(--gap));
  width: calc(100% + var(--gap));

  & > * {
    margin: var(--gap) 0 0 var(--gap);
    flex: 1 1 calc((100% / 6) - 1rem + (1rem / 6));
    //width: calc((100% / 6) - 1rem + (1rem / 6));
    background: pink;

  }
}

If I ignore the width, the flex works as expected, but not the overflow property. If I have the width property, the flex doesn't work as expected, but the overflow property does.

What can I do? I tried also to put overflow hidden in the container and doesn't work.