【发布时间】：2021-10-04 05:14:00
【问题描述】：
我有一个三行的 Bootstrap 网格，中间的网格有两列。在第一列中，我想显示视频的字幕列表，在另一列中显示视频。我正在尝试为左列（标题）设置固定宽度，在右列（视频）中设置响应宽度，但无法做到。我现在拥有的是这样的：
整个窗口大小：
这里整个页面中唯一的内容是视频，我这样做是为了简单并隔离这个问题中的问题。我为一些元素添加了彩色边框，以更好地显示我得到的行为。
我正在寻找的是在有空间的情况下让视频最大扩展至其宽度的 120%，并且当窗口缩小时，也随之缩小，但直到它达到其宽度的 80%宽度。发生这种情况时，我希望它保持在该宽度，并让整个div.container 用scroll 溢出页面。我会尽力用图片来说明这一点，并确保我给出了一个很好的解释。
完整的窗口大小（不是真实的，尚未完成）：
窗口缩小（不真实，尚未完成）
这将是整个内容应该开始溢出scroll 的最小宽度。
我不需要任何东西垂直收缩，它总是可以溢出。
HTML：
<body>
<div class="container displayer-container">
<div class="row top-row">
<!-- Some content in the top row. -->
</div>
<!-- https://stackoverflow.com/questions/41943463/prevent-wrapping-stacking-of-columns-in-bootstrap-when-shrinking-the-size/41943639 -->
<div class="row flex-nowrap mid-row">
<div class="caps-container">
<div class="cap-list">
</div>
</div>
<div class="col player-container">
<div class="video">
<video controls>
<source src="some_video.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
<div class="row bottom-row">
<!-- Some content in the bottom row.-->
</div>
</div>
</body>
CSS：
html {
width: 100%;
height: 100%;
}
body {
/* background-color: rgb(30, 30, 30); */
background-color: white;
min-width: 100%;
min-height: 100%;
padding: 0% 1%;
}
.container {
width: 100%;
height: 100%;
margin: 0;
min-width: 100%;
border: 1px solid yellow;
overflow-y: scroll;
}
.mid-row {
border: 1px solid green;
}
.caps-container {
width: 550px;
height: 550px;
overflow-y: scroll;
}
.player-container {
border: 1px solid red;
width: 100%;
}
.video {
border: 1px solid blue;
width: 100%;
height: auto;
}
video {
min-width: 80%;
max-width: 120%;
}
但是，在完整尺寸下，视频的大小不是120%，而是100%。当我缩小窗口时，当所有周围的 div 到达它时，视频就会缩小，并且缩小到 80% 以上，并且它也会溢出所有 div，如下所示：
简而言之，我有两个问题。一个是让视频有min-width 和max-width 我给它，另一个是它溢出了它的容器和所有祖先容器。导致它缩小的不是其父容器缺少可用空间，而是整个页面缺少可用空间。
前段时间我第一次尝试并成功地将视频定位到我想要的位置，将position: absolute 用于其容器，position: relative 用于其本身。但是我遇到了同样的响应问题，我正在从头开始尝试。
【问题讨论】：