Container with flex-direction: column doesn't grow horizontally when items are wrapped on Safari

Question

Here's an example:

https://jsfiddle.net/onucfm50/2/

Works perfectly on Chrome, but on Safari the container width doesn't grow to match the total width of the content. Expected behavior is that the container should expand to accommodate the wrapped columns.

.container {
  display: flex;
  box-sizing: border-box;
}

.nav-item {
  position: relative;
}

.nav-item .__body {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #0078ff;
  padding: 5px 0px 10px 10px;
  display: block;
}

.nav-item .__body ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 250px;
  width: max-content;
}

.nav-item .__body ul li {
  display: block;
  margin-right: 20px;
  margin-top: 5px;
}

<div class="container">
<div class="nav-item">
<span class="__header">Nav item</span>
<div class="__body">
<ul>
<li>Nav subitem 1</li>
<li>Nav subitem 2</li>
<li>Nav subitem 3</li>
<li>Nav subitem 4</li>
<li>Nav subitem 5</li>
<li>Nav subitem 6</li>
<li>Nav subitem 7</li>
<li>Nav subitem 8</li>
<li>Nav subitem 9</li>
<li>Nav subitem 10</li>
<li>Nav subitem 11</li>
<li>Nav subitem 12</li>
<li>Nav subitem 13</li>
<li>Nav subitem 14</li>
<li>Nav subitem 15</li>
<li>Nav subitem 16</li>
<li>Nav subitem 17</li>
<li>Nav subitem 18</li>
<li>Nav subitem 19</li>
<li>Nav subitem 20</li>
<li>Nav subitem 21</li>
<li>Nav subitem 22</li>
<li>Nav subitem 23</li>
<li>Nav subitem 24</li>
<li>Nav subitem 25</li>
<li>Nav subitem 26</li>
<li>Nav subitem 27</li>
</ul>
</div>
</div>
</div>