Html 物化css中相同高度的列

我正在使用物化css设计一个页面。我有一行，其中有两列，ID分别为“left panel”和“right panel”。左列将显示一个用户列表，其中将显示来自输入字段的右列消息

我的问题是，当消息的数量更多时，左右列的高度不会同时增加。请帮帮我

HTML:

<div id="main-row" class="row">
        <div id="left-panel" class="col s12 m2 hide-on-small-only grey lighten-3">
            <h5 class="center-align">Chatters</h5>
            <div class="divider"></div>
        </div>
        <div id="right-panel" class="col s12 m10">
            <div class="section">
                <h4>Welcome to ChatSpace</h4>
                <ul id="messages"></ul>
            </div>
            <div class="divider"></div>

            <div class="section">
                <form id="message-form">
                    <div class="input-field col s12 m12 l10">
                        <input id="message" name="message" type="text" autofocus autocomplete="off"/>
                        <label for="input_text">Type your message...</label>
                    </div>
                    <div class="input-field col s12 m12 l2">
                        <button class="green waves-effect waves-light btn">
                            <i class="material-icons right">message</i>Send</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

body {
    overflow: auto;
    margin: 0 auto;
    padding: 0 auto;
}

#left-panel {
    min-height: 100vh !important;
}

---

只需在主行上使用display flex并进行愉快的编码

#main-row { display: flex; }

---

只需在主行上使用display flex并进行愉快的编码

#main-row { display: flex; }

---

您可以使用flex，这样flex元素的所有子元素都将具有相同的hight@AbdeslemCharif谢谢成功了#主行{display:flex；}您可以使用flex，这样flex元素的所有子元素都将具有相同的hight@AbdeslemCharif谢谢成功了#主行{显示：flex；}