Css 如何限制引导容器的高度

我正在尝试创建一个消息页面，其中文本框将位于页面底部，消息将显示在页面上方。以下是我的页面代码：

<div class="ui">

    <% @messages.each do |message| %>
            <% if message.body %>
             <% user = User.find(message.user_id) %>
                  <div class="item mt-3">   
                         <div class="list">
                           <div class="item">
                             <strong><%= user.first_name %></strong>
                                <div class="content">
                                    <%= simple_format(message.body) %>
                                </div>
                            </div>
                          </div>
                        </div>
            <% end %>
            <% end %>






    <%= form_for [@conversation, @message], html: {class: "ui reply form"}, remote: true  do|f| %>

       <%= f.text_area :body, class: "message-box",  id: "message-form"%>

      <button type="submit", class="send-button", style="display: inline">
        <i class="nav-link fa fa-paper-plane"></i>
     </button>



     <%= f.text_field :user_id, value: current_user.id, type: "hidden" %>

    <% end %>
    </div>
</div>

问题是此代码显示如下

文本正在文本框下运行。我的本能是将消息和文本框放在两个单独的框中，并限制顶部框的高度，但我一直在尝试这样做，但没有成功

---

有人能建议我如何完成这项工作吗？

您应该将两者放在不同的分区中，并在文本显示的位置添加“最大高度”

我假设这是因为文本输入字段是position和position:absolute。

---

可以使两个位置：相对，并使两个显示：块。如果您想对齐屏幕底部的输入，只需使用垂直对齐，我还认为您需要向包含消息的div中添加一些自定义css样式。如最大高度：100px和溢出-y：自动

---

如果您可以提供完全呈现的html而不是模板，那么会更容易为您提供帮助。

请查看文档以获取帮助。如果使用默认容器/行/列，则不需要太多自定义css。