我必须将两个表（ElementUI的el-table）放在一起。没问题，我只是把它们放在一个div中，然后使用flexbox分割div。

<div>
    <el-table />
    <el-table />
</div>

使用以下css的container-div：

display: flex;
flex-direction: row;
gap: 30px;

• 工作得很好 *。

我还需要在每个表上方放置一个标题，所以我想将每个表 Package 在一个div中，并使用flexbox和flex-direction: column拆分该div。
我的模板：

<div class="outerContainer">
    <div class="innerContainer">
        <div>Title Left</div>
        <el-table />
    </div>
    <div class="innerContainer">
        <div>Title Right</div>
        <el-table />
    </div>
</div>

我的CSS：

.outerContainer {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 30px;
}
.innerContainer{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

**问题：**当我增加viewport-width（通过隐藏侧边栏或增加浏览器的宽度）时，表格会完美地扩展。但是，一旦我尝试减少页面的宽度，表格就不会缩小并溢出视口。有人知道为什么用div Package 表会影响它的响应性吗？