Flexbox在容器外部扩展，而不是包装

Question

我有3个flexboxes，每个都在另一个里面。最外面的flexbox(.flex-1)保存标题，下一个flexbox(.flex-2)保存按钮，最里面的flexbox(.flex-3)保存几个.item。理想情况下，项将向下排列，然后当没有剩余空间时(基于最外面框的大小)应该向右换行。如果在.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

这个问题似乎是由.flex-2上的CSS属性align-items引起的。

试着移除它。