Tailwind CSS flex项溢出父项之外

Question

我有一个包含3个子项的flexbox，看起来像这样：

<section className="px-5 flex flex-col md:flex-row md:space-x-10 justify-around">
<div className="flex flex-col py-3 md:flex-grow"><input ... /></>
<div className="flex flex-col py-3 md:flex-grow"><input ... /></>
<div className="flex flex-col py-3 md:flex-grow"><input ... /></>
</section>

这在全屏显示中效果良好，但在缩小窗口宽度(接近1000px(后，弹性项开始脱离父项。

如何使项目保持在其父项内？

全屏

缩小窗口宽度后

我想实现

Answer 1

通过在父级中添加flex-wrap类(在您的案例中为section标记(将解决此问题。

阅读有关弹性包裹的更多信息https://tailwindcss.com/docs/flex-wrap

Answer 2

如果你使用flexbox，你可以使用flex wrap属性来解决你的问题。，

但我试图用网格得到同样的结果

<div class="container py-10">
<section class="grid grid-cols-3 gap-4 p-5 border border-gray-400 rounded-lg">
<div class="w-full h-20 bg-orange-200 border border-orange-400 rounded-md"></div>
<div class="w-full h-20 bg-orange-200 border border-orange-400 rounded-md"></div>
<div class="w-full h-20 bg-orange-200 border border-orange-400 rounded-md"></div>
</section>
</div>

我认为这样更好：(