JSFiddle - React, Tailwind, and code Playground

HTML

<div class="fixed">
<div class="outer">
    <div>
        <p>Title</p>
    </div>
    <!-- The inner contents of container-wrapper is dynamic so I cannot
        simply move the action-bar item outside -->
    <div class="container-wrapper">
        <div class="action-bar">
            <button>I don't do anything but occupy space</button>
        </div>
        <!-- Firefox allows this element to grow beyond the remaining space of the container-wrapper
            thus expanding the height of the container-wrapper and not allowing scroll -->
        <div class="container">
            <div class="list">
                <div class="display-name">
                    Display Name
                </div>
                <div class="display-date">
                    Mar 31, 2015
                </div>
            </div>
            <div class="list">
                <div class="display-name">
                    Really long name that should be truncated. I don't know
                </div>
                <div class="display-date">
                    Mar 31, 2015
                </div>
            </div>
            <div class="list">
                <div class="display-name">
                    Display Name
                </div>
                <div class="display-date">
                    Mar 31, 2015
                </div>
            </div>
            <div class="list">
                <div class="display-name">
                    Display Name
                </div>
                <div class="display-date">
                    Mar 31, 2015
                </div>
            </div>
            <div class="list">
                <div class="display-name">
                    Display Name
                </div>
                <div class="display-date">
                    Mar 31, 2015
                </div>
            </div>
        </div>  
    </div>
</div>
</div>

CSS

html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}
html, body {
    margin: 0;
    height: 100%;
}
.fixed {
    position: fixed;
    top: 60px;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 400px;
}
.outer {
    border: 1px solid black;
    height: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
}

.outer > * {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}

.container-wrapper {
    -ms-flex: 1 1 100%;
    flex: 1 1 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
}

.action-bar {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    border-top: 1px solid silver;
    border-bottom: 1px solid silver;
    padding: 20px;
    text-align: right;
}

.container {
    -ms-flex: 1 1 100%;
    flex: 1 1 100%;
    overflow-y: auto;
}

.list {
    display: -ms-flexbox;
    display: flex;
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px solid aqua;
}

.display-name {
    -ms-flex: 1 1 100%;
    flex: 1 1 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-right: 8px;
}

.display-date {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}