Css - 大小一个浮动列到另一个高度相同

Question

通过阅读类似问题的一些答案，我仍然不清楚这是否可能。

考虑一个clearfix-ed容器中2个浮动列的情况。 Column1的内容可以增长并确定容器的高度。 Column2的内容始终保证小于Column1，但其高度应该拉伸以填充容器。

如何让Column2伸展？

Here's the jsbin (With Column2 not stretching)

我不想做的事情

• 使用javascript
• 绝对位置
• 使用表格html

我可以用这些技巧弄清楚，但认为这是一个学术练习。我正在试图弄清楚css是否提供了一个“正确”的解决方案，我可以将其提交到内存并完成它。我怀疑答案可能是以下一种我尚未完全理解的技术。

• 使用表格css显示类型
• 很快就会出现整个flexbox的内容
• 无论是Twitter bootstrap是什么

Answer 1

就像你怀疑的那样，表CSS will work只要你不需要支持oldIE：

section {
  width: 50%;
  display: table-cell;
  box-sizing: border-box;
  border: solid grey 1px;
}

也可以使Flexbox正常运行，但要注意浏览器中what's currently implemented与what the current draft says之间的显着差异。

我没有在愤怒中使用Twitter引导程序，因此我无法对其发表评论。