我在 flex 列中模拟 flex 表，尽管我很努力，但我不得不放弃 table 对象并仅使用 flex 对象。 http://olivier.lahaye1.free.fr/SystemImager/log_table.html
现在我想避免为列设置任意宽度，并模拟表格列，它会根据列中最大的子项调整自身的大小。
我想用纯 CSS 来实现(我使用的是 HTML5)
我希望第 1 列和第 2 列在不换行内容的情况下获得最小宽度。
现在我使用的是 8em 的固定宽度，宽度是任意的。
header > :not(:last-child), .row > :not(:last-child), footer > :not(:last-child) {
flex: 0 0 auto;
width: 8em;
text-align: center;
}
header > :last-child, .row > :last-child, footer > :last-child {
flex: 1 1 auto;
padding-left: 1em;
}<header>
<div>Tag</div>
<div>Priority</div>
<div>Messages (All logs).</div>
</header>
<article id="serverData">
<div class='row'><div>systemimager</div><div>Warning</div><div>Warning message</div></div>
<div class='row'><div>kernel</div><div>info</div><div>Loading driver e1000e.</div></div>
<div class='row'><div>systemimager</div><div>Error</div><div>Imaging of host failed.</div></div>
</article>有没有办法将 > :first-child 的宽度设置为 header + 所有 .row 元素的所有第一个子元素中最大的？ (与 > :nth-child(2) 相同)
语法允许这样的事情:
width: max((header > :first-child, .row > :first-child, .footer > :first-child).width); 存在吗？
最佳答案
我在这里找到了答案:https://codepen.io/paulobrien/pen/OjMBZg 诀窍是使用带有标题类的网格并将其粘贴到位置:粘性； 然后我调整它以满足我的需要，结果是: http://olivier.lahaye1.free.fr/SystemImager/log_table3.html 在 EDGE 和 chrome 上运行良好。 Safari 上的小调整问题(Safari bug 恕我直言)。如果有人知道如何在浏览器窗口大于所需时使 safari 高度调整大小快乐，请随时发帖。
<html>
<head>
<title>Scrollable table in flex column V3.</title>
<style>
html, body {
margin: 0;
padding: 0;
height:100%;
}
.flex {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
overflow: hidden;
background: lightgrey;
}
.wrapper > div {
background-color: beige;
color: black;
border-radius: 5px;
padding: 0.2em 0.2em;
font-size: medium;
}
.wrapper {
flex: 0 1 auto;
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 2px;
background-color: #fff;
max-height:100%;
overflow:auto;
}
.wrapper div:nth-child(3n+1), .wrapper div:nth-child(3n+2) {
text-align: center;
}
.head, .foot {
position:sticky;
top:0;
font-weight: bold;
}
.foot {
top:auto;
bottom:0;
}
</style>
</head>
<body>
<section class="flex">
<p>
SystemImager v5.0
<hr style="width: 100%">
<div class="wrapper">
<div class="head">Tag</div>
<div class="head">Priority</div>
<div class="head">Messages (All messages including kernel messages and sttout+stderr).</div>
<div>systemimager</div>
<div>Info</div>
<div>Command line: si.image-server=10.0.238.84 si.config=testimage.conf acpi=no noapic ip=11.0.42.15::11.0.42.2:255.255.255.0:oscarnode99:eth0:off dns=8.8.8.8,8.8.4.4 rd.vconsole.keymap=fr-mac vga=791 splash si.debug rd.retry=20</div>
<div>kernel</div>
<div>info</div>
<div>Loading driver e100e.</div>
<div>script 1</div>
<div>StdErr</div>
<div>No such file or directory.</div>
<div>script 2</div>
<div>StdOut</div>
<div>I'm script 2.</div>
<!-- more lines (multiple of 3 divs) -->
<div>systemimager</div>
<div>info</div>
<div>Giving control back to system.</div>
<div class="foot">Footer with a lot of text.</div>
<div class="foot">notice</div>
<div class="foot">I won't use that in SystemImager, but it is here for demonstration.</div>
</div> <!-- end wrapper -->
<div style="flex: 1 1 auto"></div>
<hr style="width: 100%">
<span>Status line: A clean solution.</span>
</section>
</body>
</html>
关于html - 是否可以将第二个 child 的宽度设置为行列表中最大的一个？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58596832/