Flash邮件弄乱了Flexbox的布局

Question

我有一个Rails应用程序，在其中我使用flexbox分隔页眉，内容和页脚。该flexbox可以确保用空白填充内容，以填充整个屏幕，从而使页脚始终位于布局的底部，如图所示。

（不要介意糟糕的布局最终会改善它）

我用来执行此操作的代码如下：

# application.html.slim
  body
    .box
      .row.header
        = render 'layouts/navbar'
      .row.content
        = yield
      .row.footer
        = render 'layouts/footer'

# custom.css.scss
.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.box .row.header {
  flex: 0 1 auto;
  /* The above is shorthand for:
  flex-grow: 0,
  flex-shrink: 1,
  flex-basis: auto
  */
}

.box .row.content {
  flex: 1 1 auto;
  margin-top: 100px;
  margin-bottom: 50px;
}

.box .row.footer {
  flex: 0 1 40px;
}

它按预期工作。但是，当我启动devise的登录功能并触发错误/成功消息时，布局变得混乱，现在看起来像：

使用检查元素时，我发现<div class="row footer">消失了，= render 'layouts/footer'变成了<div class="row content">之下

我不太确定是什么触发了这种行为，到目前为止我还没有运气。

我的Flash模板是：

# _flash.html.erb

- if !flash.empty?
  .row
    - flash.each do |message_type, message|
      |  <div class="
      = flash_class(message_type)
      |  closable"> 
      i.close.icon
      = message

Answer 1

尝试关闭Flash自定义div：

  .row
    - flash.each do |message_type, message|
      |  <div class="
      = flash_class(message_type)
      |  closable"> 
      i.close.icon
      = message
      |  </div> #<= here