html - Materialise css中相同高度的列

Question

我正在使用 materialize 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>

CSS:

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

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

Answer 1

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

#main-row { display: flex; }