是否可以使用 CSS flex 使视频元素宽度始终为其容器的 50%？

Question

是否可以使用 CSS flex 使视频元素宽度始终为其容器宽度的 50%？

这是我的代码。

 function go() { let cell2 = document.getElementById("cell2"); let trouble = document.getElementById("trouble"); let htmlString = "<div class=\"border border-dark m-1 p-0 rounded-3 peer-cell text-break\">"; htmlString += "<video className=\"m-0 p-0 rounded-3\" controls autoplay muted>"; htmlString += "<source src=\"https://www.w3schools.com/html/mov_bbb.mp4\">"; htmlString += "</video>"; htmlString += "</div>"; let p = document.createRange().createContextualFragment(htmlString); trouble.insertBefore(p, cell2); }

 video { height: 100%; object-fit: cover; position: absolute; width: 100%; }.peer-cell { background-color: red; flex-grow: 1; position: relative; }.peer { height: 200px; margin: 3px; width: calc(100% - 6px); }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" /> <div class="h-100 m-0 overflow-auto p-0 w-100"> <div class="d-flex flex-row peer" id="trouble"> <div id="cell2" class="border border-dark m-1 p-1 rounded-3 peer-cell text-break"> Peer Name:sdff<br/>Status:connected </div> </div> </div> <button onclick="go()">Switch</button>

当我点击按钮时，假设将一个视频元素添加到一个 id 为“trouble”的 div 中； 并且视频元素和“cell2”宽度都应该等于其父元素的 50%。

不幸的是，它没有按我的预期工作，视频元素和“cell2”宽度都不等于其父元素的 50%。

你能告诉我发生了什么事吗？

Answer 1

#cell2 {
width: 3vw; 
}
.video {
width: 3vw;
}

这对我有用，你会得到你想要的 output：

PC和移动屏幕：

检查 output：

 function go() { let cell2 = document.getElementById("cell2"); let trouble = document.getElementById("trouble"); let htmlString = "<div class=\"border border-dark m-1 p-0 rounded-3 peer-cell text-break video\">"; htmlString += "<video className=\"m-0 p-0 rounded-3\" controls autoplay muted>"; htmlString += "<source src=\"https://www.w3schools.com/html/mov_bbb.mp4\">"; htmlString += "</video>"; htmlString += "</div>"; let p = document.createRange().createContextualFragment(htmlString); trouble.insertBefore(p, cell2); }

 video { height: 100%; object-fit: cover; position: absolute; width: 100%; }.peer-cell { background-color: red; flex-grow: 1; position: relative; }.peer { height: 200px; margin: 3px; width: calc(100% - 6px); } #cell2 { width: 3vw; color: #fff; text-shadow: 1px 1px 2px #000; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-size: 1.5rem; }.video { width: 3vw; }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" /> <div class="h-80 m-0 p-0 w-100 center"> <div class="d-flex flex-row peer" id="trouble"> <div id="cell2" class="border border-dark m-1 p-1 rounded-3 peer-cell text-break"> Peer Name:sdff<br />Status:connected </div> </div> </div> <center> <button onclick="go()">Switch</button> </center>