How to configure css flexbox so height of one of the block depends on it content?

Question

I try to use flexbox to achieve next:

1. footer and header with fixed height.
2. editor get all space witch don't get attachments
3. attachments height from 0 to 148px depending on content (attachments number)

Is that real? I only have achieved proportional resizing of .attachments/.editor blocks with flex-shrink / flex-grow without content dependency.

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/

Answer 1

You shouldn't have flex-grow and flex-shrink on anything except for flex-grow on the .editor.

This way the fixed heights of footer and header wouldn't change, the height of the .attachments would be equal to its content but not bigger than its max-height, and the .editor would fill all other space.

• Here is an example without content at attachements — http://jsfiddle.net/kizu/r9b8E/ — it have the desired 0 height.
• Here is it with one line of text: http://jsfiddle.net/kizu/z2Fj6/
• Here is it with 10 lines — http://jsfiddle.net/kizu/McZTV/

Updated: and if you'd need to have some min-height at .editor, you can just set it, but if you'd like other blocks not to shrink when the body becomes smaller, you should give everyone flex-shrink: 0 — http://jsfiddle.net/kizu/X7L8S/ (resize the result pane to see how it behaves)