Chrome中等高的Flexbox列

要使用Flexbox创建两个相等的列：

• 父容器得到

  display: flex

• 每列都是由div创建的，它们可以

  flex: 1

  增长/收缩

拉伸第一列的子级：

• 还提供了第一列，

  display: flex

  以便其子元素具有柔韧性并可以成长

• 旁边的孩子被给予

  flex: 1

  并会成长/收缩

这是您可能需要的最简单的Flexbox指南。

Flexbox兼容性： IE11 +和所有现代浏览器。

例

使用Bootstrap
：这是您的评论中的小提琴，添加了我的更改。左侧的1px间距已被删除

div.flex.row:before,div.flex.row:after { display: none }

相关答案：在Chrome中使用display：flex时，请消除1px的间隙

在此示例中，我删除了所有不必要的类。当前，两个列的高度都由最高的列确定。您还可以在

height: 100vh

视口单位兼容性： 几乎
完全支持
视口单位
__。

要为列提供更大的宽度，请为它提供更大的弯曲值。我将本例中的第二列更改为

flex: 3

body {  color: red;  margin: 0;}.flex {  display: flex;  }.column {  flex: 1;}.column:first-child {  display: flex;}.column:last-of-type {  background: #000;  flex: 3;}aside {  flex: 1;  background: #F90;}<div >  <!-- menu -->  <div >    <aside>      Menu goes here    </aside>  </div>  <!-- content -->  <div >    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac elementum justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus nec elementum erat. Suspendisse consequat ut metus ut cursus.      Aenean et lectus id libero venenatis varius. Vivamus luctus ligula sit amet faucibus vulputate. Vestibulum tincidunt fringilla mauris, a vulputate magna egestas nec. Vivamus a odio ut nibh viverra fermentum.</p>    <p>Nulla facilisi. Pellentesque nec libero leo. Duis porta ut neque vulputate blandit. In vel quam eu eros finibus feugiat ut in nulla. Morbi congue, tellus commodo euismod pulvinar, lacus dui fringilla lectus, in tempus mi nulla semper ex. Integer feugiat,      lectus a facilisis rutrum, ex magna tincidunt ligula, in suscipit turpis lorem quis neque. Suspendisse dictum, nulla at aliquet cursus, magna tellus mattis purus, nec volutpat mauris nunc non neque. Mauris pretium mauris sed eros interdum lobortis.      Aenean id vestibulum nisl. Praesent sit amet tempor nulla, consequat viverra ante. Maecenas eu pretium lacus, a consectetur sem. Proin viverra eget turpis eu condimentum. Donec et egestas enim. Maecenas fermentum auctor ligula, nec fringilla mi.      Quisque hendrerit purus eget urna semper sodales.</p>  </div></div>