防止宽表拉伸弹性盒项目和容器，而应使该表可滚动

Question

我的顶层布局是n列，所有列均具有固定宽度（侧边栏），除了中心一栏（主边栏）应自动填充剩余的空间。

所以，我在主栏中有一张棘手的宽桌子。它具有的包装器overflow-x: auto，但是与其触发滚动器上的滚动，不如将所有内容拉伸到顶级flex容器。可以通过添加width: calc(100% - {sum of widths of other columns}px)到主栏中来解决此问题，但是我正在寻找一种更灵活的解决方案，该解决方案将允许添加更多列并调整现有列的大小而无需触碰此calc规则。

有任何想法吗？有没有办法对弹性项目说：填满剩余的空间，但不允许您的内容伸展您的注意力？

UPD：可以通过将主栏的内容包装在带有的表中来做到这一点table-layout: fixed（代码在此处），但是对此我感到很遗憾。有人知道更灵活的解决方案吗？还是这个好吗？

// this JS generates placeholder text, ignore it
for (const el of document.querySelectorAll(".lorem")) {
    el.innerHTML = Array(Number(el.getAttribute("p")) || 1)
        .fill()
        .map(() => `<p>${chance.paragraph()}</p>`)
        .join("");
}

body {
    margin: 0;
}

.outer {
    display: flex;
}

.sidebar {
    flex: 0 0 300px;
    background: #eef;
}

.mainbar {
    background: #ffe;
    /* width: calc(100% - 500px); */
}

.rightbar {
    flex: 0 0 200px;
    background: #fef;
}

.table-wrapper {
    width: 100%;
    overflow-x: auto;
    background: pink;
}

.table-wrapper td {
    min-width: 400px;
}

<script src="https://unpkg.com/chance@1.0.16/chance.js"></script>
<div class="outer">
    <div class="sidebar">
        <div class="lorem" p="4"></div>
    </div>
    <div class="mainbar">
        <div class="table-wrapper">
            <table>
                <tr>
                    <td class="lorem"></td>
                    <td class="lorem"></td>
                    <td class="lorem"></td>
                    <td class="lorem"></td>
                </tr>
            </table>
        </div>
        <div class="lorem" p="10"></div>
    </div>
    <div class="rightbar">
        <div class="lorem" p="3"></div>
    </div>
</div>

Answer 1

如果我了解您的正确，请添加flex: 1; min-width: 0;到您的.mainbar规则中，它应该会起作用。

在flex: 1将使其花费的可用空间，并min-width: 0允许柔性的项目比它的内容，你可以在此处详细了解小：

• 为什么弹性项目不能缩小到超过内容大小？

堆栈片段

// this JS generates placeholder text, ignore it
for (const el of document.querySelectorAll(".lorem")) {
    el.innerHTML = Array(Number(el.getAttribute("p")) || 1)
        .fill()
        .map(() => `<p>${chance.paragraph()}</p>`)
        .join("");
}

body {
    margin: 0;
}

.outer {
    display: flex;
}

.sidebar {
    flex: 0 0 300px;
    background: #eef;
}

.mainbar {
    background: #ffe;
    flex: 1;
    min-width: 0;
    /* width: calc(100% - 500px); */
}

.rightbar {
    flex: 0 0 200px;
    background: #fef;
}

.table-wrapper {
    width: 100%;
    overflow-x: auto;
    background: pink;
}

.table-wrapper td {
    min-width: 400px;
}

<script src="https://unpkg.com/chance@1.0.16/chance.js"></script>
<div class="outer">
    <div class="sidebar">
        <div class="lorem" p="4"></div>
    </div>
    <div class="mainbar">
        <div class="table-wrapper">
            <table>
                <tr>
                    <td class="lorem"></td>
                    <td class="lorem"></td>
                    <td class="lorem"></td>
                    <td class="lorem"></td>
                </tr>
            </table>
        </div>
        <div class="lorem" p="10"></div>
    </div>
    <div class="rightbar">
        <div class="lorem" p="3"></div>
    </div>
</div>