为什么Flex项目扩展全高而没有flex-grow？

我有以下代码：为什么Flex项目扩展全高而没有flex-grow？

.ai-container, 
 
.ai-overlay { 
 
    position: fixed; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 
.ai-overlay { 
 
    background-color: black; 
 
    opacity: .2; 
 
    z-index: 1000; 
 
} 
 
.ai-dialog { 
 
    z-index: 1001; 
 
    display: flex; 
 
    flex-direction: column; 
 
    border: 1px solid darkgray; 
 
    border-radius: 5px; 
 
    background-color: white; 
 
    min-width: 300px; 
 
    box-shadow: 0px 0px 15px #444; 
 
    overflow: hidden; 
 
} 
 
.ai-header, 
 
.ai-footer, 
 
.ai-body { 
 
    padding: 10px; 
 
} 
 
.ai-header { 
 
    background-color: hsl(0, 0%, 20%); 
 
    color: white; 
 
    display: flex; 
 
    font-size: 1.1em; 
 
    justify-content: space-between; 
 
} 
 
.ai-footer { 
 
    display: flex; 
 
    background-color: lightgray; 
 
    justify-content: space-between; 
 
}

<div class="ai-container"> 
 
    <div class="ai-overlay"></div> 
 
    <div class="ai-dialog"> 
 
    <div class="ai-header"> 
 
     <span>This is the header</span> 
 
     <span>X</span> 
 
    </div> 
 
    <div class="ai-body">This is the body</div> 
 
    <div class="ai-footer"> 
 
     <span> 
 
      <button>Submit</button> 
 
      <button>Lookup</button> 
 
     </span> 
 
     <button>Cancel</button> 
 
    </div> 
 
    </div> 
 
</div>

您可以在这里看到的结果：http://plnkr.co/edit/5SOxkMV9qQ86m6d2jyT0?p=preview

然而，由此产生的 “对话” 被拉伸以填充整个垂直空间。

我期待这个，如果我有flex-grow: 1，但我没有。

如果您添加以下的CSS：

.ai-container, .ai-overlay { 
    ... /*all the previous settings */ 
    align-items: center; 
}

然后在对话框看起来像我所期望的......只是高到足以适应内容。我认为删除align-items只是将对话框移到浏览器窗口的顶部而不影响高度。

我在这里错过了什么？

来源

2016-12-28 RHarris

我尝试添加'柔性基础：content'和'柔性成长：0'到我所有的孩子班，但没有任何变化。 – RHarris

我认为删除align-items只是将对话框移到浏览器窗口的顶部而不影响高度。

你就近了。您假定默认值为align-items为flex-start。其实，默认值是stretch。

这意味着Flex项目将始终展开以覆盖容器横轴的全部长度，除非初始设置被覆盖。

您可以覆盖与align-items: flex-start，center默认等

这里有一些更多的细节：How to disable equal height columns in Flexbox?

来源

2016-12-28 20:00:38

谢谢吨！它做到了。我忽略了默认值！ – RHarris

为什么Flex项目扩展全高而没有flex-grow？

回答

相关问题