After analyzing the issue, it seems like the solution lies in extending the wrapper div to the right side of the page without any wrapping. Whenever I attempt to set the width to 100vw or 100%, the content within the div gets pushed below all the other elements on the page.
It may look a bit odd, but you can view the issue in action here: https://jsfiddle.net/8u3Lzjxw/
If you set the width to 100% or 100vh, the outcome might resemble this: https://i.sstatic.net/oY7Jp.png
The ideal scenario would be for the wrapper to extend and cover the highlighted area in green. Luckily, the height is not causing any issues currently.
You can refer to the structure of the HTML code below:
<div class="active-sockets">
<h1 class="active">Active Sockets</h1>
<div class="wrapper">
<div class="socket">
<h2 class="socket-name">Lorem Ipsum</h2>
</div>
</div>
</div>
Here's the CSS code that corresponds to the HTML structure:
.wrapper {
display: inline-flex;
flex-wrap: nowrap;
float: left;
margin: 0;
width: 100%;
}
.socket {
background-color: rgb(24, 24, 24);
margin: .2em;
padding: .8em;
border-top-left-radius: .5em;
border-bottom-left-radius: .5em;
width: 100%;
margin: 0;
margin-top: 1em;
}
.active-sockets {
float: left;
margin: 1em;
height: 100vh;
}
.active {
background-color: rgb(24, 24, 24);
color: white;
font-family: 'Poppins', sans-serif;
margin: 0;
padding: .5em;
border-top-left-radius: .25em;
border-bottom-left-radius: .25em;
width: 100%;
}