I am encountering an issue with the 100vh height setting, as it is causing a vertical scrollbar to appear. The problem arises when embedding external content in the widget-holder div, which has a height set to 100vh. Despite this, the content within the widget-holder exceeds the height of the parent div and triggers the appearance of a vertical scrollbar.
If I attempt to resolve this by removing the fixed header, the vertical scrollbar disappears. However, eliminating the fixed header is not a viable option. Alternatively, reducing the height within the widget-holder div results in some content being cut off visually, making it impossible to decrease the height accordingly.
I am seeking a solution that will allow the widget-holder's content to fit perfectly within the parent div's height.
html {
--banner-menu-width: 250px;
--ps-facets-width: 280px;
--left-column-width: 349px;
--main-column-width: 890px;
--right-column-width: 0px;
}
* {
box-shadow: none;
margin: 0;
padding: 0;
border: 0;
}
body {
caret-color: #4181af;
font-size: 12px;
line-height: 142%;
margin: 0;
overflow-y: scroll;
background-color: #f3f3f4;
font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
height: 100%;
}
#app {
display: grid;
grid-template-columns: 0 250px auto;
grid-template-rows: auto;
}
#app-content {
background-color: #f3f3f4;
grid-column: 3;
display: grid;
grid-template-columns: 100%;
/* height: 100vh; */
}
#fixed-header {
display: grid;
grid-template-columns: 100%;
background-color: antiquewhite;
top: 0;
position: sticky;
z-index: 400;
height: 60px;
}
#app #dynamic-style {
visibility: hidden;
grid-column: 1;
}
#app #banner {
grid-column: 2;
grid-row-start: 1;
grid-row-end: -1;
min-height: 100vh;
max-height: 5000px;
display: flex;
justify-content: stretch;
position: fixed;
width: var(--banner-menu-width);
z-index: 450;
}
#app #banner .banner-background {
background: #223645;
z-index: 500;
align-self: stretch;
width: 100%;
}
.dashboard-container {
height: 100%;
}
.widget-holder {
display: flex;
flex-direction: column;
height: 100vh;
font-family: Arial, sans-serif;
background: aqua;
}<div id="app" class="grid-container">
<div id="dynamic-style"></div>
<div id="banner">
<div class="banner-background"></div>
</div>
<div id="app-content" class="regular-workspace">
<div id="fixed-header"></div>
<div class="dashboard-container">
<div class="widget-holder"></div>
</div>
</div>
</div>