I am currently working on an HTML application that needs to fit perfectly within a designated space without causing any page level scrollbars. I have utilized flexbox styles extensively to achieve this, but unfortunately, I am facing compatibility issues with the latest versions of IE/EDGE and FF (Chrome is working fine).
Here are the specific requirements:
- The layout should consist of 2 columns
- The left-hand side (LHS) column must occupy 100% of the available vertical space and display a vertical scrollbar when the content exceeds its height.
- The right-hand side (RHS) column should take up 100% of the available space both vertically and horizontally (which I have successfully implemented)
- Both LHS and RHS columns cannot use "position:absolute" styles (due to performance problems in FF when rendering HighCharts inside containers with flexible and absolute positioning), nor can they have explicit pixel heights/widths (as the design needs to be responsive).
I have created a fiddle to illustrate the issue specifically seen in FF/IE/EDGE - the appearance of page-level scrollbars caused by the content in the LHS column. Chrome, however, behaves as expected.
HTML
<div class="wrap">
<div>
SOME 3RD PARTY ELEMENTS HERE
</div>
<div class="main">
<div class="row">
<div class="left">
<p>lots of content</p>
<p>lots of content</p>
// enough content to be higher then app's allowed height
</div>
<div class="right">
right
</div>
</div>
</div>
</div>
CSS
html,
body {
height: 100%;
}
.wrap {
height: 100%;
display: flex;
flex-direction: column;
background: red;
}
.main {
flex: 1;
display: flex;
flex-direction: column;
background: yellow;
}
.row {
flex: 1;
display: flex;
background: blue;
}
.left {
overflow-y: scroll;
background: green;
}
.right {
flex: 1;
background: pink;
}
Does anyone have a solution to achieve this seemingly straightforward design while adhering to the specified requirements?