在div中使用包含环绕的flex列，占用所有剩余空间。

Question

我用的是顺风，但我的问题更多的是关于柔板箱。我有这4个‘节点’，我想要包装在列，但它们没有包装时，宽度结束。我不希望这一页超过这一页的高度。以下是我目前的尝试：

​

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.2/tailwind.min.css" rel="stylesheet"/>
<div class="flex flex-col bg-blue-100 h-screen">
  <h1 class="text-center text-3xl bg-blue-200 py-2">My Header</h1>
  
  <div class="flex-auto flex flex-col flex-wrap">
    <div class="bg-blue-300 border-2 border-black h-16 w-12"></div>
    <div class="bg-blue-300 border-2 border-black h-16 w-12"></div>
    <div class="bg-blue-300 border-2 border-black h-16 w-12"></div>
    <div class="bg-blue-300 border-2 border-black h-16 w-12"></div>
  </div>
</div>

​

我的预期目标是布局看起来类似于这样：

​

我知道这个问题可能与此有关，因为浏览器不知道何时开始包装，但我仍然没有找到对我来说有意义的解决方案。

Answer 1

首先，我尝试增加一个固定高度的弹性父母，这似乎是可行的，但不是一个非常优雅的解决方案。因此，我决定这样做:)添加溢出参数似乎可以做到这一点。

​

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.2/tailwind.min.css" rel="stylesheet"/>
<div class="flex flex-col bg-blue-100 h-screen">
  <h1 class="text-center text-3xl bg-blue-200 py-2">My Header</h1>
  
  <div class="flex-auto flex flex-col flex-wrap overflow-auto">
    <div class="bg-blue-300 border-2 border-black h-16 w-12"></div>
    <div class="bg-blue-300 border-2 border-black h-16 w-12"></div>
    <div class="bg-blue-300 border-2 border-black h-16 w-12"></div>
    <div class="bg-blue-300 border-2 border-black h-16 w-12"></div>
  </div>
</div>

​