Safari中flex-direction:column的容器在元素换行时无法横向扩展

问题现象 #

该导航下拉菜单在Chrome中可正常扩展宽度，容纳换行后的多列子项；但在Safari中，容器宽度无法适配所有列的总宽度，无法达到“容器扩展以容纳换行后列”的预期效果。

解决方案 #

Safari对flex-direction: column结合flex-wrap: wrap的布局中，width: max-content的计算逻辑存在兼容性差异。通过以下调整可修复问题：

• 给下拉菜单外层容器（.nav-item .__body）添加width: max-content，让父容器根据内部列表总宽度自适应
• 移除列表（ul）上的width: max-content，让列表宽度由内容自然撑开

修改后的代码 #

CSS

.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;
  width: max-content; /* 添加该行，让父容器自适应宽度 */
}

.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;
}

HTML

<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>

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