如何配置css flexbox，以便块之一的高度取决于它的内容？答案

【问题标题】：How to configure css flexbox so height of one of the block depends on it content?如何配置css flexbox，以便块之一的高度取决于它的内容？
【发布时间】：2014-03-24 06:35:25
【问题描述】：

我尝试使用flexbox来实现next：

具有固定高度的页脚和页眉。
编辑获取所有空间女巫不获取附件
附件高度从 0 到 148 像素，具体取决于内容（附件编号）

这是真的吗？我只用 flex-shrink / flex-grow 实现了 .attachments/.editor 块的比例调整，没有内容依赖。

http://jsfiddle.net/7ADtq/

HTML

<section class="page">
    <header></header>
    <section class="editor"></section>
    <section class="attachments">
        <article></article>
        <article></article>
        <article></article>
    </section>
    <footer></footer>
</section>

CSS

.page{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;

    background-color: #f00;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
}
.page header{
    flex-grow: 0;
    flex-shrink: 0;

    background-color: #0f0;

    margin: 0 0 10px 20px;
    font-size: 0;
    line-height: 24px;
    height: 24px;
    padding: 15px 20px 15px 0;
    border-bottom:1px solid #ebeced;

}

.page footer{
    flex-grow: 0;
    flex-shrink: 0;

    background-color: #00f;

    height: 60px;
    line-height: 60px;
    text-align: right;
    font-size: 0;
    padding-right: 20px;
    border-top:1px solid #ebeced;   
}

.attachments{
    flex-grow: 1;
    flex-shrink: 1;

    background-color: #0ff;

    max-height: 148px;

    margin: 0 20px; 
    outline: none;
    color:#3c434a;
    font-size: 17px;
    line-height: 25px;
    overflow: auto;
}

.attachments article{
      float: left;
      border: 1px solid #e3e4e6;
      background-color: #fff;
      height: 57px;
      width: 303px;
      margin: 10px 10px 0 0; 
      position: relative;
      line-height: 57px;
}

.editor{
    flex-grow: 1;
    flex-shrink: 1;

    background-color: #ff0;

    margin: 0 20px;
    position: relative; 

    outline: none;
    color:#3c434a;
    font-size: 17px;
    line-height: 25px;
}

Господа，яхочучтобыуменяспомощьюфлекбоксовблоксредакторовзаполнялвсеместо，котороенезаполняетблоксаттачментами，ичтобыблоксаттачментамибылвысотойот0до148pxвзависимостиотналичиявнематтачментов。 Подскажите, это вообще реально？ Если я пробую применить flex-shrink / flex-grow оно просто пропорцианально заполняет пространство блоками, без учета контента внутри.

http://jsfiddle.net/7ADtq/

【问题讨论】：

下面写的是什么？
防止附件“弯曲”？如果你想修复它，为什么要在它上面使用 flex-grow/shrink？
bellow — 俄语中的相同问题。
@onetrickpony 我希望它以我希望的方式在某些范围内弯曲。编辑器是页面的主要元素，如果附加了很多文件，它们在页面中的空间不能超过 148px。
页眉底部的边距是你的问题吗？甚至是边距和底部边距？ jsfiddle.net/7ADtq/2

标签： css layout frontend flexbox

【解决方案1】：

除了.editor 上的flex-grow 之外，您不应该在任何东西上使用flex-grow 和flex-shrink。

这样，页脚和页眉的固定高度不会改变，.attachments 的高度将等于其内容但不大于其max-height，.editor 将填充所有其他空间。

这是一个在附件中没有内容的示例 - http://jsfiddle.net/kizu/r9b8E/ - 它具有所需的 0 高度。
这里有一行文字：http://jsfiddle.net/kizu/z2Fj6/
这里有 10 行 — http://jsfiddle.net/kizu/McZTV/

更新：如果您需要在.editor 处设置一些最小高度，您可以设置它，但如果您希望其他块在主体变为更小，你应该给每个人flex-shrink: 0 — http://jsfiddle.net/kizu/X7L8S/（调整结果窗格的大小以查看它的行为）

【讨论】：