html - 防止宽表拉伸 flexbox 项和容器,改为使该表可滚动
问题描述
我的顶级布局是 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>
解决方案
如果我理解你是正确的,请添加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>
推荐阅读
- c# - 未知事件 DropGesture
- reactjs - 我们还需要用反应钩子状态做浅/深复制吗?
- c# - 使用泛型进行 C# 子类化:我需要一个额外的 ctor 泛型参数,但是如何实现?
- freeradius - Acct-Input-Octets 未知模块
- python-3.x - VS Code 不支持配置的调试类型“python”
- python - 如何在 PyCharm 中导入 .pgn 数据?
- r - 如何生成多个虚拟变量?
- f# - Fable 与 EventTarget 的语法混淆
- modelica - Modelica中图形项的常用定义
- php - 如何让 /bin/bash 在 Composer 中运行所需的 php 版本?