CSS Grid Container 在 Flex container 内缩小（Storybook 再现）

Question

有没有人知道这段代码为什么会这样做？我有一个网格容器，里面有 4 个元素，应该水平显示它们，它们之间有 15px 的间隙。不知道为什么，但 Storybook 有使用 flex 容器垂直居中内容的居中代码，但这样做会将我的网格容器缩小到 8px 宽度。删除 display: flex 可以解决问题，但会破坏居中显示。我需要向此组件添加什么 CSS 以确保它保持足够的宽度以水平显示数字而无需硬编码宽度值？

<div id="sb-addon-centered-wrapper">
  <div id="sb-addon-centered-inner">
    <div id="grid">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>
  </div>
</div>

#sb-addon-centered-wrapper {
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  display: flex;
  align-items: center;
  overflow: auto;
}
#sb-addon-centered-inner {
  margin: auto;
  max-height: 100%;
}

#grid { 
 display: grid;
  grid-gap: 15px;
grid-template-columns: repeat(auto-fit, minmax(0, max-content));
}

https://codepen.io/eriklharper/pen/oNjpgVj?editors=1100

Answer 1

网格项目被挤压（并环绕），因为 .sb-addon-centered-inner 的 child 上的 flex-grow: 1 没有做任何事情。

<div id="sb-addon-centered-wrapper">
  <div id="sb-addon-centered-inner">
    <div style="flex-grow: 1;"> <------ THIS
      <div id="grid">
           …

.sb-addon-centered-inner 没有应用 display: flex 或 inline-flex，因此 children 无法识别 flex 属性。

改为将 flex-grow: 1 添加到 .sb-addon-centered-inner，这是一个弹性项目。

然后，将 justify-content: center 的内容置于网格容器的中心。

#sb-addon-centered-inner {
  flex-grow: 1;
}

#grid { 
  justify-content: center;
}

#sb-addon-centered-wrapper {
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  display: flex;
  align-items: center;
  overflow: auto;
}

#sb-addon-centered-inner {
  margin: auto;
  max-height: 100%;
  flex-grow: 1; /* new */
}

#grid {
  display: grid;
  grid-gap: 15px;
  grid-template-columns: repeat(auto-fit, minmax(0, max-content));
  /* min-width: 18px; */
  justify-content: center; /* new */
}

#grid div {
  min-width: 40px;
}

<div id="sb-addon-centered-wrapper">
  <div id="sb-addon-centered-inner">
    <div style="flex-grow: 1;">
      <div id="grid">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
      </div>
    </div>
  </div>
</div>

CSS Grid Container 在 Flex container 内缩小（Storybook 再现）

CSS Grid Container shrinks inside a Flex container (Storybook reproduction)

css

css-position

flexbox

css-grid