Make second flex column scrollable

I saw this example from Flex: Scrollable div inside flex-column and attempted to use it, but I couldn't get it to work. Something is wrong, could someone look at my code and tell me where I went wrong with my code?

A row that contains two columns; left is 75% width and right is 25% width. Right column height must be the same as the left column, therefore; when the right column has overflowing content, then right column should be scrollable.

Live: http://gnt.staatus.eu/

Here's HTML code:

<div id="row">
    <div id="content">
        <video id="my-video" class="video-js vjs-default-skin vjs-big-play-centered"  controls preload="auto" data-setup='{ "autoplay": true, "preload": "auto", "fluid": true }'>
            <source type="application/x-mpegURL" src="hidden" />
            <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
        </video>
        <script src="https://vjs.zencdn.net/7.5.5/video.js"></script>
    </div>
    <div id="chat">
        <div id="chat2">
            <ul>
                <li>username: Tanaka THAI KICKU</li>
                <li>username: text</li>
                <li>username: text</li>
                <li>username: text</li>
                <li>username: text</li>
                <li>username: text</li>
                <li>username: text</li>
                <li>username: text</li>
                <li>username: text</li>
                <li>username: text</li>
                <li>username: text</li>
                <li>username: text</li>
                <li>username: text</li>
                <li>username: text</li>
                <li>username: text</li>
                <li>username: text</li>
                <li>username: text</li>
                <li>username: text</li>
                <li>username: text</li>
                <li>username: text</li>
                <li>username: text</li>
                <li>username: text</li>
                <li>username: text</li>
                <li>username: text</li>
                <li>username: text</li>
                <li>username: text</li>
                <li>username: text</li>
                <li>username: text</li>
                <li>username: text</li>
                <li>username: text</li>
                <li>username: text</li>
                <li>username: text</li>
                <li>username: text</li>
                <li>username: text</li>
                <li>username: text</li>
                <li>username: text</li>
                <li>username: text</li>
            </ul>
        </div>
    </div>
    <br style="clear: both;" />
</div>

and here's stylesheet:

#content {
    flex: 1;
    flex-basis: 75%;
    overflow: hidden;
}

#content a {
    color: white;
}

#chat {
    flex: 1;
    flex-basis: 25%;
    display: flex;
    overflow: hidden;
    flex-direction: column;

    color: white;
    word-wrap: break-word;
    padding: 0px;
}

#chat2 {
    overflow: auto;
}

#chat2 ul {
    list-style: none;
    padding: 5px;
    margin: 0;
}

#row {
    display: flex;
    background-color: #1f1f1f;
    clear: both;
    overflow: hidden;

}