Tailwind中w-screen引发Div布局错乱的解决方法咨询

当前界面布局如下：

想要实现右侧Div填满剩余空白区域，但使用w-screen或大宽度值时，该Div会侵入左侧Div，效果如下：

出现问题的代码如下：

<div>
    <Header />
    <div className="flex">
        <Menu />
            <div className="flex-col w-96 h-screen ml-20 bg-verdeMenuFin">
                <div className="ml-10 mt-10 w-80 h-28 bg-verdeIdv rounded-2xl shadow-sombraTres">

                </div>
                <div className="ml-10 mt-14 w-80 h-32 bg-verdeIdv rounded-2xl shadow-sombraTres">

                </div>
                <div className="ml-10 mt-14 w-80 h-96 bg-verdeIdv rounded-2xl shadow-sombraTres">

                </div>
            </div>
        <div className="flex bg-rose-900 w-screen h-screen">

        </div>
    </div>

</div>

问题出在w-screen这个类——它会把元素宽度强制设为整个视口宽度，完全无视父容器的剩余空间，所以才会覆盖左侧元素。

只需要把右侧Div的w-screen替换成flex-1即可：

<div className="flex bg-rose-900 flex-1 h-screen">

</div>

父容器是flex布局，flex-1会让子元素自动占据父容器内所有剩余可用空间，既能填满右侧空白，又不会侵入左侧区域。

如果要避免左侧固定宽度元素被内容挤压，还可以给它们加上flex-shrink-0，防止被压缩：

<Menu className="flex-shrink-0" />
<div className="flex-col w-96 h-screen ml-20 bg-verdeMenuFin flex-shrink-0">
    <!-- 内部元素 -->
</div>

内容的提问来源于stack exchange，提问作者Lucca