嵌套Flex布局下工具栏width:100%失效，如何实现父容器适配与横向滚动？

在多层级Flex布局的应用中添加工具栏，HTML结构如下：

<div class="toolbar">
  <div class="button">Button1</div>
  <div class="button">Button2</div>
  <div class="button">Button3</div>
  ...
</div>

预期效果：工具栏占满直接父容器宽度，内容溢出时可横向滚动。最初编写的CSS在空白文档中正常运行，但嵌套进现有Flex布局后，width: 100%会让工具栏宽度变为整个文档宽度，还会打乱外部Flex布局；仅当设置固定宽度（如width: 300px）时才能正常工作。

曾尝试将工具栏设为display: block，按钮使用inline-block配合white-space: nowrap，但宽度仍受上层DOM结构影响。最终目标是实现类似Excel底部的滚动工具栏效果。

注：此问题涉及无固定尺寸的嵌套Flex元素，与常见的Flex子项尺寸限制问题不同。

要实现Flex子项（工具栏）占满父容器次要轴空间、支持内容溢出滚动且不影响外部布局，核心是打破Flex布局默认的min-width: auto限制，具体操作如下：

方案1：调整工具栏的直接父容器（Flex子项） #

给工具栏的直接父容器添加min-width: 0，防止父容器被工具栏内容撑开超出预期宽度：

.toolbar-parent {
  min-width: 0;
}

同时保留工具栏的核心样式：

.toolbar {
  display: flex;
  flex-direction: row;
  overflow-x: auto; /* 仅水平溢出时显示滚动条 */
  width: 100%;
  overflow-y: hidden; /* 隐藏垂直滚动条，优化视觉效果 */
}

方案2：直接调整工具栏样式 #

如果工具栏本身是Flex容器的直接子项，可直接给工具栏设置以下样式：

.toolbar {
  display: flex;
  overflow-x: auto;
  flex: 1 1 100%; /* 强制占满父容器可用宽度 */
  min-width: 0; /* 允许内容溢出时收缩，避免撑开父容器 */
  overflow-y: hidden;
}

原理说明 #

Flex布局中，子项默认的min-width: auto会让子项宽度至少容纳自身内容，导致父容器被意外撑开。设置min-width: 0后，子项可以收缩到父容器的可用宽度范围内，此时width: 100%或flex:1就能正确作用于父容器宽度，内部内容溢出时自然触发横向滚动。

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