css - 如何强制 block 容器始终占用所有可用宽度？

Question

这是我目前正在练习的 HTML 代码。 CSS 不完整，因为我不知道如何做我想做的事:

.container {
  margin: auto;
  width: 700px;
  border: solid blue 2px;
}
.container div {
  padding: 10px 0;
  vertical-align: top;
}
#orange {
  background-color: coral;
}
#blue {
  background-color: lightblue;
}
.container > div .content {
  border: dotted black 1px;
  height: 100px;
  width: 250px;
  margin: auto;
  display: block;
  text-align: center;
}

<div class="container">
  <div id="orange">
    <div class="content">content
      <br />width: 250px</div>
  </div>
  <div id="blue">
    <div class="content">content
      <br />width: 250px</div>
  </div>
</div>

当容器足够大时，橙色和蓝色 block 应该并排放置，如下所示:

如果我减小容器的宽度，橙色和蓝色 block 内的水平边距将缩小，直到它们的边界与内容的边界相交:

这是我减少容器宽度时想要获得的结果:

有人知道怎么做吗？如果可能，没有 JS。而且容器不依赖于屏幕尺寸，所以我不能使用基于设备宽度的媒体查询。当然，该解决方案必须与尽可能多的 Web 浏览器兼容(包括最新版本的 IE)。

编辑:我考虑过使用 flexbox 但我希望我能找到一个没有的解决方案。顺便说一下，我对一种在 CSS 代码中编写仅适用于 IE9 及以下版本的特定规则的方法很感兴趣。

编辑2:似乎无法通过以下限制来做我想做的事:

• 没有JS
• 屏幕尺寸没有条件，但容器尺寸有条件

所以我想我将不得不放弃至少其中一个......

Answer 1

使用 flexbox 的解决方案。

如果您希望使用特定于 IE9 及以下版本的样式，有 2 个选项:

1. 有单独的样式表(.css 文件)特定于 IE 9 及以下版本，在 HTML 中引用它 - Target IE9 Only via CSS

2. 以这种方式编辑 CSS - https://css-tricks.com/snippets/css/browser-specific-hacks

.container {
  display: flex;
  background-color: green;
  justify-content: space-around;
  padding: 10px;
}
#orange {
  background-color: coral;
  height: 100px;
  min-width: 250px;
  text-align: center;
  margin: 5px;
}
#blue {
  background-color: lightblue;
  height: 100px;
  min-width: 250px;
  text-align: center;
  margin: 5px;
}
@media (max-width: 500px) {
  .container {
    flex-flow: row wrap;
  }
}

<div class="container">
  <div id="orange">
    <div class="content">
      content
      <br/>width: 250px
    </div>
  </div>
  <div id="blue">
    <div class="content">
      content
      <br/>width: 250px
    </div>
  </div>
</div>