Question

当溢出带有包装的父级flexbox时，flexbox看起来好像达到了100％的宽度-在这里，我希望它是计算出的子代的宽度。可以使用max-width完成此操作，但是我在寻找一种解决方案，因为我正尝试避免媒体查询，所以不这样做。

情况如下：

<div class="wrapper">
  <div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <!-- items here dynamically -->
  </div>
</div>

相关CSS：

.wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  width: 200px;
  height: 200px;
}

假设子级宽度的总和（200px * 3 = 600px）小于页面宽度（例如700px），则.container div将仅包装子级，并将其宽度作为孩子们的宽度之和（600像素）。到目前为止一切顺利。

当添加一个新的项目，使其大于页面宽度（200px * 4 = 800px）时，父级div将变为100％（700px），新项目将换行。理想情况下，我希望父div仅具有包装子项的宽度（600像素），这样包装器就可以将其在页面中居中。

我可以使用max-width来实现这一点，但是这意味着我要为每个停靠站添加媒体查询。我当时正在考虑使用css calc，但是该函数没有下限函数，因此无法计算宽度。

使用flex box甚至有可能吗？还是问得太多？

Codepen example，带有边距和填充以强调效果。

注意：我不反对媒体查询，而只是寻找一种非媒体查询解决方案，因为这可能会涉及很多断点，具体取决于布局。

是否可以将子级包装在flexbox中，并使父级仅具有子级的宽度

0 个答案: