Html 动态布局的flex

我正在尝试使用flex为视频会议应用程序创建动态布局。我希望所有的视频显示在同一行，并使用100%的高度。PFB是我写的代码。这适用于两个视频，但第三个视频在下一行移动，而且视频没有消耗100%的高度

.containervid {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    @media (orientation:portrait) {
        flex-direction: column;
    }
}

.items {
    position: relative;
    display: inline-flex;
    flex: 1 1 0;
}

 video {
    position: relative;
    object-fit: cover;
    z-index: 0;
    padding: 0;
    width: 100%;
    height: 100%
}

---

我刚刚做了一个快速代码笔，这是一个非常简单的例子，但应该做你想要的。它使用bootstrap来定义您想要调整的列大小，或者使用

col

来获得动态列宽

---

希望有帮助

嗨@Sean Mooney，谢谢你的输入，但我希望布局是动态的。所以，如果会议中只有一个人，视频应该占据100%的宽度和100%的高度。如果有两个人100%高，50%宽，而有三个人100%高，33.3%宽。@AnupamChaplot你真的应该在你原来的问题中包括这一点。你介意把你的问题改成；-）吗？未来的回答者不必通过搜索其他答案的注释来获得问题的说明。你能添加HTML结构吗？请看一下本指南。