VueJS + ElementUI - el-table resizing issue in div

Question

I have to place two tables (ElementUI's el-table) next to eachother. No problem, I just put them in a div and split the div using flexbox.

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

With the following css for the container-div:

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

Works perfectly well.

I also need to place a heading above each table, so I would like to wrap each table in a div and split that div using flexbox and flex-direction: column.

My template:

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

and my css:

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

Problem: When I increase the viewport-width (by hiding the sidebar or increasing the width of my browser), the tables expand just perfectly. But once I try to reduce the width of my page, the tables won't shrink back down and overflow outside the viewport. Does anybody know why wrapping a table in a div messes with it's responsiveness?

Answer 1

I had the same issue, I solved setting a max-width to the containers, for example

.outerContainer, .innerContainer {
    max-width: 100%;
}

Try it and let me know if it works also for you :)