如何在父元素之外扩展flex容器答案

【问题标题】：How to expand flex container outside parent element如何在父元素之外扩展flex容器
【发布时间】：2019-08-28 23:17:03
【问题描述】：

我需要相对定位一些 flex 容器，所以我将它设置为父显示相对和 flex 本身 - 绝对。但问题是 flex 宽度不会扩展到其相对父级之外。如何解决这个问题？

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<div class="w-1/3 bg-blue-500 mx-auto my-5 relative p-4">
  <div class="absolute flex flex-wrap border border-red p-4">
    <div class="border-b w-1/2">content super long</div>
    <div class="border-b w-1/2">content super long</div>
    <div class="w-1/2">content super long</div>
    <div class="w-1/2">content super long content</div>
  </div>
</div>

flex 容器有足够的空间来显示其内容而无需换行。但事实并非如此。

我需要以下结果：

【问题讨论】：

删除 flex-wrap 类，你告诉它要换行。
@VaibhavVishal 但后来我失去了 2 列视图，我也需要它。
每一行都应该分组。
我无法对它们进行分组，因为将来我需要响应的列数，从 1..3 开始。

标签： html css flexbox

【解决方案1】：

您可以通过将父元素的position 属性更改为static 来实现这一点，此外还可以添加另一个带有relative position 的容器。

示例：

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<div class="w-1/3 bg-blue-500 mx-auto my-5 relative p-4" style="position:static">
  <div class="container" style="position:relative">
    <div style="width:500px;" class="absolute flex flex-wrap border border-red p-4">
      <div class="border-b w-1/2">content super long</div>
      <div class="border-b w-1/2">content super long</div>
      <div class="w-1/2">content super long</div>
      <div class="w-1/2">content super long content</div>
    </div>
  </div>
</div>

【讨论】：

事实并非如此。因为我需要在容器上相对定位，所以要相对定位它的子 flexbox。
@Molfar 对不起，我更新了，看看。我添加了另一个容器，因此现在您可以使子项大于其父项，同时保持与它的相对关系。我希望这能解决您的问题。
这几乎是我最初的例子，只是弹性元素的宽度固定。它不是我最需要的。我正在寻找使用动态宽度来解决这个问题，具体取决于内容。codesandbox.io/s/cocky-haibt-jeywl?fontsize=14