css - 填充父 div 的剩余宽度(非 flexbox 或 calc)

Question

.alert {
  position: absolute;
  right: 0;
  bottom: 20px;
  background: red;
  padding: 20px;
  min-height: 70px;
  min-width: 400px;
}
.alert-forgotPassword {
  margin-top: 10px;
  width: 100%;
  background: green;
}
.alert-forgotPassword-input-wrapper {
  float: left;
}
.alert-forgotPassword-input {
  width: 100%;
}
.alert-forgotPassword-button-wrapper {
  float: right;
}

<div class="alert">
  <div>
    <div class="alert-forgotPassword-input-wrapper">
      <input class="alert-forgotPassword-input" type="text" size="" placeholder="your.email@company.com">
    </div>
    <div class="alert-forgotPassword-button-wrapper">
      <button>Reset Password</button>
    </div>
  </div>

http://codepen.io/basickarl/pen/WwjEqy

上面的代码获取了彼此相邻的 div。我希望输入框的宽度为 100%，以便它始终接触按钮的一侧，如下例所示。

如果父 div 被拉伸(stretch)得更宽的示例:

如果父 div 宽度较小的示例:

我希望有一个适用于 ie9 及更高版本的纯 css/html 解决方案，欢迎对结构进行更改!然而，欢迎减少。

Answer 1

如果你不想使用 flexbox，你可以用你当前的 HTML 内容这样做:

CSS

.alert-forgotPassword {
  margin-top: 10px;
  width: 100%;
  background: green;
}
.alert-forgotPassword-input-wrapper {
  overflow: auto;
  padding-top: 1px;
}
.alert-forgotPassword-input {
  width: 100%;
  box-sizing: border-box;
}
.alert-forgotPassword-button-wrapper {
  float: right;
  padding-left: 10px;
}

您可以使用 overflow: auto 而不是输入包装器上的 float: right，这样 block 将在水平方向上占据尽可能多的空间。因此，无论父 block 的宽度如何，它的宽度都将适合父级左侧和按钮包装器之间的空间。

按钮包装器上的左填充允许在按钮和输入之间引入一个空格。它也适用于输入包装器上的右填充，或任何包装器上的边距。这只是个人喜好。

我在输入包装器上添加了 1px 的顶部填充，只是为了垂直对齐输入和按钮。

输入上的 box-sizing: border-box 是必需的，因为您的输入有边框。如果没有它，宽度为 100%，您的输入实际上会大于 100%:它的宽度将是容器的 100% + 边框的宽度。在这种情况下，overflow: auto 会显示一个水平滚动条(因为内容会比容器大)。我们不想要丑陋的滚动条!

See Demo