假设我有两个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/
如果我在两者之间有一致的尺寸，那没什么大不了的。一个可以包装，一切都会好起来的。大小上的差异让我感到困惑。
最佳答案
您可以尝试flexible boxes。
例如，
body {
display: flex;
flex-wrap: wrap;
}
#first {
flex: 1 15em;
}
#second {
flex: 1 10em;
}
由于flex增长因子设置为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>关于css - 如果没有足够的水平空间，将并排放置的并排元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28974182/