html - 使一个元素在没有 flexbox 的情况下占用剩余空间

Question

我遇到这样一种情况，我有两个元素并排 float ，它们都不能有明确的宽度 - 它们的宽度由它们的动态内容定义。

我需要右侧的元素在不设置任何宽度的情况下占据元素行中尽可能多的剩余垂直空间。

我目前正在尝试逐步停止使用 flexbox，因为客户提示使用它时浏览器不兼容(主要是在 IE 中)。

下面是我想实现这种效果的场景示例。

.container {
  background-color: tomato;
  padding: 10px;
  overflow: auto;
  width: 700px;
}
nav {
  float: left;
  margin-right: 10px;
}
nav ul {
  background-color: blue;
}
nav ul li {
  display: inline;
  padding: 20px;
}
form {
  float: left;
  padding: 15px;
}

<div class="container">
  <nav>
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Blog</li>
      <li>Contact</li>
    <ul>
  </nav>
  <form>
    <input type="text" placeholder="Search">
    <button type="submit">Submit</button>
  </form>
</div>

Answer 1

这就是我们喜欢 flexbox 的原因，但是，是的，如果您必须支持 MS 不再支持的旧浏览器，请放弃并使用表格。不给fluid列设置宽度，给最后一个100%；

table td:last-child {
  width: 100%;
  background-color: #aaa;
}

<table>
  <tr>
    <td>Some content</td>
    <td>Bigger&nbsp;content</td>
    <td></td>
  </tr>
</table>

顺便说一下，Michael's answer更好;它仅使用 CSS 来获得表格效果。在这种情况下，您就无法 mock 要求您支持该恐龙的人。

ul {display: table}
li {display: table-cell}
li:last-child {
  width: 100%;
  background-color: #aaa;
}

<ul>
  <li>Some content</li>
  <li>Bigger&nbsp;content</li>
  <li></li>
</ul>