Chrome中的等高Flexbox列

Question

我有一个简单的2列布局,我想使用Flexbox达到相同的高度:

HTML

<div class="row flex">
    <!-- menu -->
    <div class="col-xs-4">
        <aside>
            Menu goes here
        </aside>    
    </div>
    <!-- content -->
    <div class="col-xs-8">
        <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>
    </div>
</div>

CSS

body { color: red; }
.flex { display: flex; }
aside { background: #000; height: 100%; }

这适用于Firefox但不适用于Chrome:这是一个小提琴

我尝试了一些东西(包括供应商前缀),但它仍然无效.

Answer 1

要使用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: 100vhFlex容器上填充页面的整个高度- 在此处阅读有关视口单元的更多信息.

视口单元兼容性: 视口单元几乎得到很好的支持.

要为列提供更大的宽度,请为其提供更大的弹性值.我已将此示例中的第二列更改flex: 3为更宽广.

body {
  color: red;
  margin: 0;
}
.flex {
  display: flex;
  /*Should the columns span the entire height of the page? Use:
  height: 100vh;*/
}
.column {
  flex: 1;
}
.column:first-child {
  display: flex;
}
.column:last-of-type {
  background: #000;
  flex: 3;
}
aside {
  flex: 1;
  background: #F90;
}

<div class="flex">
  <!-- menu -->
  <div class="column">
    <aside>
      Menu goes here
    </aside>
  </div>
  <!-- content -->
  <div class="column">
    <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>