html - 如何摆脱表中的 "red zone"？

Question

div {
  display: table;
  width: 900px;
}

input {
  width: calc(100% - 10px);
  display: table-cell;
}

section {
  display: table-cell;
  background: red;
}

<div>
  <input>
  <section><button>+ invite</button></section>
</div>

我希望 input 适合所有剩余的地方。我正在尝试使用表格来做到这一点。但我无法摆脱“红区”。这是不必要的空间，我正试图摆脱它。

我希望输入更宽以便没有“红色区域”。

重要:将按钮宽度设置为 100% 不是正确的解决方案。

这里是密码笔链接https://codepen.io/CitizenOne/pen/QegBjQ

Answer 1

不要使用表格布局模型。 Flexbox 更强大，更适合这一点。

<section>此内容似乎也没有正确的语义，所以我摆脱了它。

div {
  display: flex;
  outline: dotted black 5px;
  width: 500px; /* Reduced width to make it clearer in the small demo window */
}

input {
  flex: 1; 
  background: #afa;
  margin-right: 25px;
}

button {
  flex: 0;
  background: #faa;
}

<div>
  <input>
  <button>+ invite</button>
</div>