并排元素，如果没有足够的水平空间，则堆叠

Question

假设我有两个div：

<div id="first">
    <h1>First Div</h1>
</div>
<div id="second">
    <h2>Second Div</h2>
</div>

我想并排显示它们。

但是，这是一个旨在以多种视口大小工作的网站。我想为这些元素指定最小宽度，让浏览器担心将它们布局。如果没有足够的水平空间，我希望这些div垂直堆叠并占据100％的水平空间。

我从这开始：

#first {
  min-width: 15em;
  max-width: 100%;
}
#second {
  float: right;
  max-width: 10em;
}

没有编写媒体查询，有没有办法用CSS处理这个问题？ （现代的CSS3规则很好，我想让浏览器尽可能地解决这个问题。）

JSFiddle：https://jsfiddle.net/p8z1zr2g/1/

如果我在两者之间有一致的尺寸，那就没那么大了。一个人可以包装，一切都会好的。正是尺寸的差异使我感到困惑。

Answer 1

您可以尝试flexible boxes。

例如，

body {
  display: flex;
  flex-wrap: wrap;
}
#first {
  flex: 1 15em;
}
#second {
  flex: 1 10em;
}

由于弹性增长系数设置为1，它们将增长以填充可用空间，无论它们是否在同一条线上。

/* Layout */
body {
  display: flex;
  flex-wrap: wrap;
}
#first {
  flex: 1 15em;
}
#second {
  flex: 1 10em;
}

/* Debugging Colors */
body > * {
  outline: 2px solid #444;
}
body >:nth-child(1) {
  outline-color: #f0a;
}
body >:nth-child(2) {
  outline-color: #0fa;
}

<div id="first">
  <h1>First Div</h1>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<div id="second">
  <h2>Second Div</h2>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>