占据父母

Question

我有一个网格（我使用语义ui），左列有固定宽度（例如768px），所以右列。我希望右栏中的内容占据所有可用的高度（例如768px）。现在它只是堆叠和顶部。请参阅演示：https://jsfiddle.net/evdymapm/1/

在这个右栏中，我有三个要素：

            <div class="ui horizontal divider">
                Test
            </div>

            <div>
                <div id="about" class="nano">
                    <div class="nano-content">
                        <p> 12:34:56: &nbsp;&nbsp;&nbsp; &lt;Test&gt; test test
                        <p> 12:34:56: &nbsp;&nbsp;&nbsp; &lt;Test&gt; test test
                        <p> 12:34:56: &nbsp;&nbsp;&nbsp; &lt;Test&gt; test test
                        <p> 12:34:56: &nbsp;&nbsp;&nbsp; &lt;Test&gt; test test
                    </div>
                </div>
            </div>

            <div class="ui divider"></div>
            <div class="ui action input">
                <input type="text" placeholder="">
                <button class="ui button">Send</button>
            </div>

第一个是分隔符，第二个是可滚动区域，第三个是带输入的分隔符。所以我想要第二个元素

                <div>
                    <div id="about" class="nano">
                        <div class="nano-content">
                            <p> 12:34:56: &nbsp;&nbsp;&nbsp; &lt;Test&gt; test test
                            <p> 12:34:56: &nbsp;&nbsp;&nbsp; &lt;Test&gt; test test
                            <p> 12:34:56: &nbsp;&nbsp;&nbsp; &lt;Test&gt; test test
                            <p> 12:34:56: &nbsp;&nbsp;&nbsp; &lt;Test&gt; test test
                        </div>
                    </div>
                </div>

占用所有可用空间，以便第一个元素位于列的顶部，第二个元素占据空间（例如90％），第三个元素位于列的底部。

这可能吗？我怎么能这样做？

提前致谢。