In the application, there is a collapsed sidebar on the left labeled "sidebar-left" and a container on the right with various types of content labeled "content." The issue arises with the width of this container, as it needs to take up 100% of the remaining width. While different types of content work well with this setup, when a scrollable table is placed in the "content" container, it constantly tries to stretch the table to 100% of the screen size instead of the container size. Below is a snippet of the code:
.wrapper {
display: flex;
align-items: stretch;
width: 100%;
}
.sidebar-left {
width: 300px;
background: red;
}
.content {
/*width: calc(100% - 300px); it works, but .sidebar-left should have flexible size*/
width: 100%;
}
.sidebar-right {
width: 20px;
background: blue;
}
.scrollable-table {
overflow: scroll;
width: 100%;
white-space:nowrap;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Collapsible sidebar using Bootstrap 4</title>
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>
<body>
<div class="wrapper">
<div class="sidebar-left">
Sidebar left
</div>
<div class="content">
<div data-v-e474bf0e="" class="scrollable-table">
<table class="table table-striped table-hover table-sm">
<!-- Table content goes here -->
</table>
</div>
</div>
</div>
</body>
</html>Attempts were made with width: calc(100% - 300px);, however, the sidebar dimensions need to be variable from 80 to 300px and remain collapsed. While common solutions have been sought, none have successfully resolved the issue of the content div stretching to 100% of the screen width instead of the remaining width.