我有一个两列的行，我希望其中一行(包含一些文本)保持其高度和大小独立于窗口大小，另一行(包含视频)随窗口大小收缩和拉伸。
我是一个CSS初学者，通过阅读相关的答案，我无法更好地了解如何做到这一点。
这是HTML。我没有为视频设置高度或宽度，因为我希望它是可变的，并且整个页面在视频的最小宽度之后溢出。
<!-- Originally tried with bootstrap grid, but that didn't work, that's why the class names -->
<div class="row upper-row">
<div class="text-column">
<!-- some paragraphs -->
</div>
<div class="video-column">
<div class="video">
<video controls>
<source src="<some source>" type="video/mp4">
</video>
</div>
</div>
</div>
尝试使用CSS:
视频的样式几乎是空的，因为在尝试了这么多东西之后，没有一个是有效的，太多了，不能在这里列出。我读了fit-content,object-fit，试着用flexbox，但不能使这个工作。
.text-column {
width: 500px;
}
.video-column {
min-width: 500px;
}
之前看到三个答案张贴到目前为止，我已经开始尝试与Bootstrap的自动布局列，它似乎工作。唯一的事情，我还没有能够整理出来的是，在视频已经达到它的min-width，页面没有溢出;相反，视频被包装到第二行，一切都变得一团糟。
我已经从提供的答案中阅读了一些关于方法的信息，我将签出到以前的提交来尝试它们。现在，这就是我所做的。我添加了一些东西，但主要内容是一样的。
HTML:
<div class="container">
<div class="row upper-row">
<div class="col-lg-auto text-column">
<!-- some paragraphs -->
</div>
<div class="col video-column">
<div class="player-container">
<div class="video">
<video controls>
<source src="<some source>" type="video/mp4">
</video>
</div>
</div>
</div>
</div>
</div>
CSS:
.player-container {
/*This width seems to control the actual video size. If I use 100%, it allows the video to get too big and overflow the screen.*/
width: 90%;
/*This is the height that seemed most appropriate for this div to actually contain the video height*/
height: 100%;
/*I use this position because I am overlaying some things on the video*/
position: relative;
top: 5%;
left: 4%;
}
.video {
/*This is to do the overlap*/
position: absolute;
top: 0%;
left: 0%;
}
video {
min-width: 10%;
max-width: 100%;
min-height: 10%;
max-height: 100%;
}
这样，文本列保持相同的宽度，视频列成功地随着窗口缩小，但是，正如我所说，在达到min-width之后，它不会溢出。
你可以通过在css中使用media queries或者为容器指定你想要的width and height auto来实现这一点它也会使其响应
实现两列布局的方法有很多。在我看来，最简单的解决方案是使用flex。
Codepen的解
然而，我不推荐这种解决方案，因为它没有响应性，因为它不能很好地适应屏幕的大小，也不能很好地在手机上工作。
对于一个更好的解决方案，你很可能用2列覆盖整个屏幕的宽度，并根据需要调整视频元素的大小。
Codepen上更好的解决方案
你也可以用网格布局来代替Flex。
这是一个关于如何用CSS网格实现常见布局的好指南。
您可以使用%作为视频的响应性。
.video-column video { width: 100%; }