css - 如何将响应式视频嵌入设置与另一个 div 排成一行并且两者共享相同的高度？

Question

我试图在同一行中对齐两个分区并强制它们共享相同的高度。

左边是素材卡片div，右边是响应式视频嵌入。

为了使视频嵌入具有响应性，我使用了以下样式:

.embed-container {
        position: relative;
        padding-bottom: 56.25%;
        height: 0;
        overflow: hidden;
        max-width: 100%;
    }

    .embed-container iframe,
    .embed-container object,
    .embed-container embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

将视频 div 包含在 flex box 中时隐藏

我尝试过:

1. 将它们包含在一个 flex 行中
2. 使用表格行/单元格 CSS

STACKBLITZ

Answer 1

使用 Angular Material Sidenav 组件

The sidenav components are designed to add side content to a fullscreen app. To set up a sidenav we use three components: which acts as a structural container for our content and sidenav, which represents the main content, and which represents the added side content.

STACKBLITZ