html - 使用 css flexbox 将表格拉伸(stretch)到父 div，并将列拉伸(stretch)到表格，但未按预期工作

Question

我有一个带有表格的 div。我只是想让表格占据整个 div，然后拉伸(stretch)第二列及其包含的输入，以便输入尽可能大(即 col1+col2 = div 宽度)。

所有这些都在另一个 div 中，因此不能选择诸如 100% 之类的绝对度量。

在下面的代码中，如果我从 tr 中删除 flex-grow:1，则没有任何变化。但是，如果我从 t 中删除 display:flex，表格将不再延伸到 div。是不是很奇怪？我已经尝试将所有这些 display:flex 和 flex-grow:1 包括到 td2，但它也不起作用。

请不要告诉我在格式化时避免使用表格，因为没有其他选项像表格那样在所有情况下都有效。

#d {
  background-color:blue;
  padding:2px;
  width:400px;
  display:flex;
}
#t {
  background-color:red;
  padding:2px;
  flex-grow:1;
  display:flex;
}
#tr {
  background-color:green;
  flex-grow:1;
}

<div id='d'>
  <table id='t'>
    <tr id='tr'>
      <td id='td1'>col1</td>
      <td id='td2'><input type='text'></td>
    </tr>
  </table>
</div>

Answer 1

看起来 flexbox 和 table 互相讨厌。所以我发现我应该使用 CSS Grid Layout相反。

.wrapper {
  max-width:500px;
  margin:0 auto;
}
.wrapper > div {
  padding:2px;
  margin:2px;
  background-color: orange;
}
.wrapper {
  display:grid;
  grid-gap:2px;
  grid-template-columns:auto 1fr;
  background-color: green;
}
.one {
  text-align:right;
  align-self:center;
  grid-column:1;
  grid-row:1;
}
.two {
  grid-column:2;
  grid-row:1;
}
.three {
  text-align:right;
  align-self:center;
  grid-column:1;
  grid-row:2;
}
.four {
  grid-column:2;
  grid-row:2;
}
.wrapper > div > input {
  width:100%;
  box-sizing: border-box;
}

<div class="wrapper">
  <div class="one">Line 1, with long text:</div>
  <div class="two"><input></div>
  <div class="three">Line 2:</div>
  <div class="four"><input></div>
</div>