我在flex列中模拟一个flex表，尽管我做出了努力，但我不得不放弃表对象，只使用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+all.row元素的所有第一个子元素中的最大值？(与第n个孩子(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和镀铬。safari上的小调整大小问题(safari错误IMHO(。如果有人知道如何在浏览器窗口大于要求时让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>