Columns of same height in Materialize css

Question

I'm designing a page using materialize css. I have a row with two columns with ids "left-panel" and "right-panel" inside it. Left column will display a list of users where as in right column message from input field will be displayed.

My problem is that when the number of messages is more, the height of left and right columns do not increase together. Please help me out.

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

just use a display flex on your main row and happy coding

#main-row { display: flex; }