在flex布局中，给子项设置了flex，但未占满可用空间（内容宽度）

前端开发 2026-07-10

我正在创建一个简单的嵌套Flex结构，包含一个 .wrapper（绿色边框），它将包含一个以上的 .group（红色边框）。 Flex已应用于 .wrapper，使得 .groups水平堆叠。

.group 已对其应用了flex，使其 .items水平堆叠。

问题在于 .group 的宽度变得比它的项宽；我本来希望它要么按项的宽度自适应，要么填充该flex父容器。

我的问题：

为什么会这样？
如何让 .group 根据内容的宽度进行自适应？

如果你对背景感兴趣，我是在跟随这个教程（本教程）来实现一个仅使用CSS的轮播。

先行致谢！

        body {
            box-sizing: border-box;
        }

        .wrapper {
            width: 90%;
            margin: 100px auto;
            display: flex;
            border: 4px solid green;
        }

        .group {
            display: flex;
            gap: 10px;
            border: 4px solid red;
        }

        .item {
            background-color: lightblue;
            flex: 0 0 50px;
        }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="wrapper">
        <div class="group">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
        </div>
    </div>
</body>

</html>

解决方案

似乎是 Safari 浏览器在 flex布局 上的问题，因为在Chrome上工作正常。

下面是一种通过避免 flex 而让 .group 根据内容宽度自适应的另一种方法。它在Safari和 Chrome上都有效。我通过在HTML中添加/删除项来测试。

body {
  box-sizing: border-box;
}

.wrapper {
  width: 90%;
  margin: 100px auto;
  border: 4px solid green;
}

.group {
  display: inline-block;
  border: 4px solid red;
}

.item {
  display: inline-block;
  width: 50px;
  background-color: lightblue;
}

.item:last-child {
  margin-right: 0;
}

站内所有文章版权归属LeftHeroAI导航站，无授权禁止任何主体转载、抄袭、复制内容，亦不得私自架设镜像站点。一经侵权，本站将通过法律途径追责。