是否可以将第二个孩子的宽度设置为行列表中的最大宽度？答案

【问题标题】：Is it possible to set width of second child to the biggest one in a list of rows?是否可以将第二个孩子的宽度设置为行列表中的最大宽度？
【发布时间】：2020-02-24 01:37:31
【问题描述】：

我在 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); 存在吗？

【问题讨论】：

您的代码缺少部分 CSS 来演示您的问题，但这看起来像是典型的网格布局，而不是 flex。
提供的链接包含所有代码，包括完整的 css（查看源代码）。网格布局的问题是标题行会滚动。我需要一个静态页眉和一个静态页脚以及可滚动的行。

标签： html css flexbox column-width

【解决方案1】：

我在这里找到了答案：https://codepen.io/paulobrien/pen/OjMBZg 诀窍是使用带有标题类的网格作为标题并将其粘贴到 position:sticky; 然后我对其进行了调整以适应我的需要，结果是： http://olivier.lahaye1.free.fr/SystemImager/log_table3.html 在 EDGE 和 chrome 上运行良好。 safari 上的小问题（safari bug 恕我直言）。如果有人知道如何在浏览器窗口大于要求时使 safari height resize 快乐，请随时发布。

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

【讨论】：