我看到这个例子来自Flex：flex-column 内的可滚动 div https://stackoverflow.com/questions/34157058/flex-scrollable-div-inside-flex-column并尝试使用它，但我无法让它工作。出了问题，有人可以查看我的代码并告诉我代码哪里出了问题吗？
包含两列的行；左边是 75% 宽度，右边是 25% 宽度。因此，右列高度必须与左列相同；当右栏内容溢出时，右栏应该是可滚动的。
Live: http://gnt.staatus.eu/ 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;
}
使用此方法无法 100% 实现flex。您还必须使用一些自定义 CSS。 Flexbox 始终使高度适合内容的最大高度。在您的情况下，您需要从弹性视图中删除第二个元素，并需要将其放置在定位位置。
在下面的示例中，父元素有display: flex and position: relative。第二个子元素设置为position: absolute75% 留下了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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
