CSS实现竖尖六边形网格时部分单元格溢出容器问题求助

我正尝试仅使用CSS实现竖尖六边形网格，参考了一篇CSS技巧类文章。实现方案是用一个block容器，内部以inline-block子元素作为网格单元格。有时显示正常，但偶尔最后几个单元格会溢出父容器，经过数小时排查仍不清楚原因。

正常效果：

异常效果：

我尝试过box-sizing、flex-basis、height、min-height、margin、padding、overflow等多种属性组合，但都无法解决问题。已在两台设备的Chrome和Firefox浏览器中进行测试。我只希望容器元素的内容框能完全包裹其内容，部分子元素无法被容器包含的现象让我十分困惑。

代码实现 #

CSS代码 #

/* global.css */

:root {
  --color0: #393646;
  --color1: #4F4557;
  --color2: #6D5D6E;
  --color3: #F4EEE0;
  background-color: var(--color3);
}

* {
  font-family: Verdana, Helvetica, Arial, sans-serif;
  font-size: 1rem;
  color: var(--color0);
  border-color: var(--color1);
  border-radius: 4px;
  background-color: transparent;
  margin: 0px;
  padding: 8px;
}

body {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
}

button, input[type=submit] {
  border: none;
  color: var(--color3);
  background-color: var(--color0);
  cursor: pointer;
}

fieldset {
  border-width: 1px;
}

legend {
  margin-left: 4px;
  padding: 0px 4px;
  line-height: 1px;
}

/* map.css */

body {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: stretch;
  padding: 0px;
}

.wrapper {
  flex-grow: 1;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-around;
  align-items: center;
  padding: 0px;
  overflow: auto;
}

.container {
  --hex-columns: 14;
  --hex-span: 50px;
  --hex-diameter: calc(1.1547 * var(--hex-span));
  --hex-triameter: calc(1.5 * var(--hex-diameter) - 0.2px);
  --hex-overlap: calc(-0.25 * var(--hex-diameter));
  flex-basis: max-content;
  display: block;
  padding: 0px;
  width: calc(var(--hex-columns) * var(--hex-span) + 0.2px);
  overflow: hidden; /* DEBUG, to show when content overflows */
  font-size: 0px;
  box-sizing: border-box;
}

.container::before {
  content: "";
  float: left;
  width: calc(var(--hex-span) / 2);
  height: 100%;
  shape-outside: repeating-linear-gradient(
    to bottom,
    transparent 0 calc(var(--hex-triameter) - 3px),
    black calc(var(--hex-triameter) - 3px) var(--hex-triameter)
  );
}

.container .hex {
  display: inline-block;
  margin: 0px;
  margin-bottom: var(--hex-overlap);
  padding: 0px;
  width: var(--hex-span);
  height: var(--hex-diameter);
  vertical-align: top;
  line-height: var(--hex-diameter);
  font-size: initial;
  box-sizing: border-box;
  clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
}

.container .hex:last-child {
  margin-bottom: 0px;
}

/* For debug: */

.container .hex:nth-child(4n + 1) {
  background-color: red;
}

.container .hex:nth-child(4n + 2) {
  background-color: tomato;
}

.container .hex:nth-child(4n + 3) {
  background-color: firebrick;
}

.container .hex:nth-child(4n + 4) {
  background-color: indianred;
}

HTML代码 #

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Map</title>
    <link rel="stylesheet" href="/stylesheets/global.css" />
    <link rel="stylesheet" href="/stylesheets/map.css" />
  </head>
  <body>
    <div class="wrapper">
      <div class="container">
        <!-- Repeat a bunch of times -->
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
        <div class="hex"></div>
      </div>
    </div>
  </body>
</html>

内容的提问来源于stack exchange，提问作者Anon Ymus