html - 使第二个 flex 列可滚动

Question

我从 Flex: Scrollable div inside flex-column 看到这个例子并尝试使用它，但我无法让它工作。出了问题，有人可以查看我的代码并告诉我代码哪里出了问题吗？

包含两列的行；左边是 75% 宽度，右边是 25% 宽度。因此，右列高度必须与左列相同；当右栏内容溢出时，右栏应该是可滚动的。

直播:http://gnt.staatus.eu/

这是 HTML 代码:

<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>

这是样式表:

#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;

}

Answer 1

使用 flex 无法 100% 实现这一点。您还必须使用一些自定义 CSS。 Flexbox 始终使高度适合内容的最大高度。在您的情况下，您需要从 Flex View 中删除第二个元素，并需要将其放置在定位位置。

在下面的示例中，父元素具有 display: flex 和 position:relative。第二个子元素设置为 position:absolute 75% left 和 overflow: auto。这使得父级采用第一个子级的高度并使第二个子级可滚动。

.parent {
    display: flex;
    position: relative;
}
.child-1, .child-2 {
    border: 1px solid black;
    margin: 5px;
}
.child-1  {
    flex: 0 1 75%;
}
.child-2 {
    position: absolute;
    left: 75%;
    top: 0;
    bottom: 0;
    right: 0;
    overflow: auto;
}

<div class="parent">
    <div class="child-1">
        <p>Reference Div</p>
        <p>Reference Div</p>
        <p>Reference Div</p>
    </div>
    <div class="child-2">
        <p>Scrolling Div</p>
        <p>Scrolling Div</p>
        <p>Scrolling Div</p>
        <p>Scrolling Div</p>
        <p>Scrolling Div</p>
        <p>Scrolling Div</p>
        <p>Scrolling Div</p>
        <p>Scrolling Div</p>
        <p>Scrolling Div</p>
        <p>Scrolling Div</p>
        <p>Scrolling Div</p>
    </div>
</div>

问题的解决方案:

#content {
    flex: 0 0 75%;
    /* 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;
    /* Added */
    position: absolute;
    left: 75%;
    top: 0;
    bottom: 0;
    right: 0;
    overflow: auto;
}

#chat2 {
    overflow: auto;
}

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

#row {
    display: flex;
    background-color: #1f1f1f;
    clear: both;
    overflow: hidden;
    /*Added*/
    position: relative;
}

<link rel="stylesheet" href="http://gnt.staatus.eu/style.css">
<link rel="stylesheet" href="https://vjs.zencdn.net/7.5.5/video-js.css">

<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="http://gnt.staatus.eu/hls/test.m3u8" />
            <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>