小编Noo*_*ooT的帖子

以下情况在Google Chrome中无效;

<div class="flex-container">
    <div class="flex-item">
      <div>
        <div>
           <h2>This is a test</h2>
        </div>
       </div>
    </div>
    <div class="flex-item">
      <div>
        <div>
           <h2>This is a test</h2>
        </div>
       </div>
    </div>
    <div class="flex-item">
      <div>
        <div>
           <h2>This is a test</h2>
        </div>
       </div>
    </div>
</div>

SCSS

body,html {
  height:100%;
  background:#1D1F20;
  font-family:sans-serif;
  color:#fff;
}
.flex-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height:100%;
  .flex-item {
    flex: 1 1 auto;
    align-self: center;
    background:#87BEB7;
    padding:0 10px;
    &:nth-child(2) {
      background:#ADBEBC;
    }
    &:nth-child(3) {
      background:#BE8A74;
    }
    > div {
      display: flex;
      justify-content: …