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;
}

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

当我使用检查元素时，我看到<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