在Chrome上放大时，表格与视频合并

Question

我在页面的左侧有一张桌子，中间有一个视频。 当我在Chrome上放大时，它会合并并弄乱。 我已附上2张照片，您可以明白我的意思。

table {
text-align: left;
line-height: 40px;
border-collapse: separate;
border-spacing: 0;
width: 600px;
height: 220px;
border-bottom: 1px solid rgba(189, 193, 200, 0.5);
border-left: 1px solid rgba(189, 193, 200, 0.5);
border-right: 1px solid rgba(189, 193, 200, 0.5);
border-radius: 20px;
}

我尝试过position: absolute;似乎无法解决问题。

Answer 1

有百万种方法可以实现这一目标，其中之一就是flexbox。

.container {
  display: flex;
}

.player, .table-container {
  display: flex;
  flex-grow: 1;
}

table {
text-align: left;
line-height: 40px;
border-collapse: separate;
border-spacing: 0;
max-width: 600px;
height: 220px;
border-bottom: 1px solid rgba(189, 193, 200, 0.5);
border-left: 1px solid rgba(189, 193, 200, 0.5);
border-right: 1px solid rgba(189, 193, 200, 0.5);
border-radius: 20px;
margin-right: 20px;
width: 100%;
}

https://jsfiddle.net/eq0sdvgh/1/