Flexbox расширяет внешний контейнер вместо обертывания

Question

У меня есть 3 flexboxes внутри друг друга. Самый внешний flexbox (.flex-1) содержит заголовок и следующий flexbox (.flex-2), в котором находится кнопка и самый внутренний flexbox (.flex-3), который содержит несколько .item s. В идеале, предметы будут течь вниз, а затем, когда нет свободного места (в зависимости от размера самого внешнего блока), нужно обернуть вправо. Это работает, если высота явно задана на .flex-3, но я не могу этого сделать, потому что название изменяется по высоте.

Вместо этого он переполняется, и предметы отображаются под границей .flex-1, а также flex-2, расширяясь, чтобы соответствовать им и переполняться.

.title{width: 100%} 
 
    
 
    .flex-1{ /* Title and flex-2 */ 
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 700px; 
 
    height: 700px; 
 
    border: 4px black solid; 
 
    } 
 
    
 
    .flex-2{ /* flex-3 and button */ 
 
    display: flex; 
 
    flex-direction: row; 
 
    border: 3px #333 solid; 
 
    align-items: flex-start; 
 
    } 
 
    
 
    .flex-3{ /* contains items */ 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
    border: 2px #888 solid; 
 
    flex-grow: 1; 
 
    } 
 
    
 
    .item{ 
 
    display: block; 
 
    width: 200px; 
 
    height: 150px; 
 
    border:1px #DDD solid; 
 
    }

<div class='flex-1'> 
 
    <h3 class='title'>THIS IS A TITLE</h3> 
 
    <div class='flex-2'> 
 
    <div class='flex-3'> 
 
     <div class='item'></div> 
 
     <div class='item'></div> 
 
     <div class='item'></div> 
 
     <div class='item'></div> 
 
     <div class='item'></div> 
 
     <div class='item'></div> 
 
    </div> 
 
    <button>BTN</button> 
 
    </div> 
 
</div>

Answer 1

Проблема, как представляется, вызваны свойством CSS align-items на .flex-2.

Попробуйте удалить это.

Answer 2

Это похоже на ошибку, но поскольку flexbox по-прежнему актуально новый, а функции/поведение все время добавляются/меняются время от времени. Вы можете проверить текущие проблемы с flexbox здесь - Flexbugs.

В настоящее время, используя комбинацию из flex и станцию ​​absolute, похоже, хорошо работает в браузере. См. Следующую демонстрацию, обратите внимание, что кнопка должна быть фиксированной шириной. Надеюсь, что все в порядке.

jsFiddle

* { 
 
    box-sizing: border-box; 
 
} 
 
.flex-1 { 
 
    border: 4px black solid; 
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 600px; 
 
    height: 400px; 
 
} 
 
.flex-2 { 
 
    border: 4px blue solid; 
 
    flex: 1; 
 
    position: relative; 
 
} 
 
.flex-3 { 
 
    border: 4px red solid; 
 
    position: absolute; 
 
    left: 0; 
 
    right: 80px; /*same as button width*/ 
 
    top: 0; 
 
    bottom: 0; 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
    align-content: flex-start; 
 
} 
 
.button { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    width: 80px; /*define button width*/ 
 
} 
 
.item { 
 
    display: block; 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px grey solid; 
 
}

<div class='flex-1'> 
 
    <h3 class='title'>THIS IS A TITLE</h3> 
 
    <div class='flex-2'> 
 
    <div class='flex-3'> 
 
     <div class='item'>1</div> 
 
     <div class='item'>2</div> 
 
     <div class='item'>3</div> 
 
     <div class='item'>4</div> 
 
     <div class='item'>5</div> 
 
     <div class='item'>6</div> 
 
    </div> 
 
    <button class="button">BTN</button> 
 
    </div> 
 
</div>