Is it possible to use CSS flex to make the video element width always 50% of its container?

Question

Is it possible to use CSS flex to make the video element width always 50% of its container width?

Here is my code.

 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>

When I click on the button, suppose a video element would be added to a div whose id is "trouble"; and both the video element and the "cell2" width should be equal to 50% of its parent.

Unfortunately, it does not work as my expectation, both the video element and the "cell2" width are not equal to 50% of its parent.

Would you tell me what's going on?

Answer 1

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

This worked for me, you will get your desired output:

PC and Mobile Screens:

Check 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>