防止宽 table 拉伸 flexbox 项目和容器，改为使此 table 可滚动

Question

我的顶层布局是 n 列，所有列的宽度都是固定的（边栏），除了中央的（主栏）应该自动填满剩余的 space。

所以，我在主栏中有这个棘手的宽度 table。它有一个带有 overflow-x: auto 的包装器，但是它没有触发包装器上的滚动，而是更喜欢将 所有内容 拉伸到顶级 flex 容器。这可以通过向主栏添加 width: calc(100% - {sum of widths of other columns}px) 来解决，但我正在寻找一种更灵活的解决方案，允许添加更多列并调整现有列的大小，而无需触及此 calc 规则。

有什么想法吗？有什么办法可以对弹性项目说：填满剩余的space，但不要让你的内容拉伸你？

UPD：设法将主栏的内容包装在 table 和 table-layout: fixed 中（代码为 here ), 但我对此感到难过。有谁知道更灵活的解决方案？或者这个可以吗？

// 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 将使其可用 space 并且 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>

防止宽 table 拉伸 flexbox 项目和容器，改为使此 table 可滚动

Prevent a wide table from stretching the flexbox item and container, make this table scrollable instead

html

css

html-table

overflow

flexbox