代码之家 › 专栏 › 技术社区 › thorn0

防止宽表拉伸FlexBox项和容器,使其(表,而不是容器)可滚动

overflow flexbox html-table css html

thorn0 · 技术社区 · 6 年前

我的顶层布局是n列,所有列的宽度都是固定的(侧边栏),除了中心列(主栏),它应该自动填充剩余的空间。

所以,我在主酒吧有一张棘手的大桌子。它有一个包装 overflow-x: auto 但是,它不触发包装器上的滚动,而是倾向于拉伸一切到顶层的柔性容器。这可以通过添加 width: calc(100% - {sum of widths of other columns}px) 到了主栏,但是我正在寻找一个更灵活的解决方案,允许添加更多的列并调整现有列的大小,而不需要点击这个。 calc 规则。

有什么想法吗?有什么方法可以对弹性物品说: 填满剩余的空间,但不要让内容拉伸 ?

UPD :通过将主栏的内容包装在表中 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>

1 回复 | 直到 6 年前

Asons Oliver Joseph Ash 6 年前

如果我理解你的正确,请补充 flex: 1; min-width: 0; 给你的 .mainbar 规则和它应该表现出来。

这个 flex: 1 会占用空间和 min-width: 0 允许弹性项目小于其内容,您可以在此处了解更多信息:

Why don't flex items shrink past content size?

堆栈段

// 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>