Have spent quite a few hours trying to figure this one out, and it seems like it should be so simple. The webpage is a bit more complex, but the issue boils down to this.
I am trying to create a flex box to the left that should contain the menu, then a "content" one to the right, I want the left one to stay still, and right one to scroll up and down. However, currently I can just get it to scroll vertically.
So took the following steps
Created the "view" box
<div class="container-fluid">
<div class="row d-none d-md-block flex-nowrap wrapper boxtoview">
So that should give me one big box to fill the whole page
Then a Left column
<div class="col-md-4 float-left navstyle" id="sidebar">
Then a right column
<main class="col col-md-8 float-left col px-5 pl-md-2 pt-2 main mainview">
Whatever I put in the right column, it refuses to scroll. Strangely enough, the left hand one will scroll
As I understand it from reading numerous posts, I should turn of scrolling for page, then tell the specific div that is should scroll as a column, but it seems awfully unhappy to do so. Here is the CSS
body {
background: #ffffff;
font-family: "Montserrat", sans-serif;
height: 100%;
overflow: hidden;
/*makes the body non-scrollable (we will add scrolling to the sidebar and main content containers)*/
margin: 0px;
/*removes default style*/
display: flex;
/*enables flex content for its children*/ }
.navstyle {
font-family: "Cinzel", serif;
height: 100vh;
display: flex;
flex-direction: column;
flex-shrink: 0; }
.flex-grow {
flex: 1 0 auto; }
.mainview {
align-items: flex-start;
height: 100%;
/*allows both columns to span the full height of the browser window*/
display: flex;
flex-direction: column;
/*places the left and right headers above the bottom content*/
flex: 1;
overflow: scroll; }
.boxtoview {
min-height: min-content;
/* needs vendor prefixes */
display: flex;
}
body {
background: #ffffff;
font-family: "Montserrat", sans-serif;
height: 100%;
overflow: hidden;
/*makes the body non-scrollable (we will add scrolling to the sidebar and main content containers)*/
margin: 0px;
/*removes default style*/
display: flex;
/*enables flex content for its children*/ }
.navstyle {
font-family: "Cinzel", serif;
height: 100vh;
display: flex;
flex-direction: column;
flex-shrink: 0; }
.flex-grow {
flex: 1 0 auto; }
.mainview {
align-items: flex-start;
height: 100%;
/*allows both columns to span the full height of the browser window*/
display: flex;
flex-direction: column;
/*places the left and right headers above the bottom content*/
flex: 1;
overflow: scroll; }
.boxtoview {
min-height: min-content;
/* needs vendor prefixes */
display: flex;
}
And the HTML page:
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<title>Bootstrap 4 Layout</title>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400,800">
<link rel='stylesheet' href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./css/bootstrap.css">
<link rel="stylesheet" href="./css/styles22.css">
</head>
<body>
<div class="container-fluid">
<div class="row d-none d-md-block flex-nowrap wrapper boxtoview">
<div class="col-md-4 float-left navstyle" id="sidebar">
<div class="top"></div>
<div class="navestylemenublock">
<ul class="menulevel1">
<li class="">
<a href="">Blog</a>
</li>
<li>
<a href="">Projects</a>
</li>
<li>
<a href="">Contact</a>
</li>
<li>
<a href="">About</a>
</li>
<li>
<a href="">Search</a>
</li>
</ul>
</div>
</div>
<main class="col col-md-8 float-left col px-5 pl-md-2 pt-2 main mainview">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non sem accumsan purus blandit rutrum eu in dui. Aenean ex enim, consectetur non cursus ut, luctus vestibulum orci. Maecenas non est non nisi porttitor fringilla. Nulla accumsan, turpis ut porta suscipit, diam nisl ullamcorper justo, ut pretium orci magna at tellus. Morbi id posuere justo. Praesent dictum pellentesque lectus, quis auctor massa malesuada in. Quisque ac pretium ex. Donec eget consequat ligula. Suspendisse feugiat sapien sit amet aliquam auctor. Donec dui sapien, feugiat nec condimentum sit amet, egestas sed mi. Donec odio tellus, suscipit at eleifend sit amet, eleifend cursus elit. Fusce libero elit, congue quis ligula ac, finibus facilisis mi. Aliquam mauris turpis, posuere vitae porttitor eu, lacinia id felis. Suspendisse hendrerit mollis arcu non placerat.
Praesent euismod dolor vel nibh condimentum, ut lacinia ex pellentesque. Vivamus aliquam, ex id sodales sodales, erat tortor tincidunt diam, quis posuere est mauris non ipsum. Ut consequat fermentum massa. Aliquam mollis, nibh ut varius faucibus, lacus leo lacinia nisi, vel maximus turpis erat non elit. Aenean quis ante non dolor sollicitudin feugiat eu ac est. Aenean fringilla ligula at est laoreet consectetur. Sed non egestas orci. Vivamus a sem ipsum. Duis et leo sit amet velit dapibus aliquam. Nullam ut eleifend nulla. Praesent metus mauris, dapibus eget posuere tincidunt, efficitur egestas erat. Praesent suscipit pellentesque venenatis. Duis ipsum metus, accumsan ac pulvinar ac, lacinia ac dolor. Vivamus dignissim mollis mauris a tempus.
Praesent condimentum porta velit, eget dapibus purus ultrices pellentesque. Nullam ultrices et massa sit amet congue. Praesent sollicitudin posuere odio, quis ullamcorper nisi tincidunt et. Cras et facilisis ipsum. Praesent eget nisi placerat, lobortis ante quis, interdum ligula. Aliquam rutrum urna a varius volutpat. Nulla ut tincidunt ipsum, congue feugiat lacus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus augue mi, venenatis ut interdum in, volutpat a dui. Etiam cursus diam orci, quis fermentum magna imperdiet commodo. Vivamus at lacus ut ante mollis luctus. Fusce sit amet convallis sem. Aliquam nibh nibh, consequat eget sagittis quis, volutpat ut risus.
Aenean porta nunc finibus, porta felis non, tempor justo. Quisque nec velit justo. Integer luctus ac massa vitae lobortis. Suspendisse tempor lobortis efficitur. Suspendisse potenti. Fusce at diam sem. Nullam ex purus, consequat id iaculis non, tincidunt a quam. Nullam interdum ut mi ut iaculis. Duis viverra tristique sodales.
Suspendisse et enim tortor. Proin molestie a velit eget cursus. Nunc nec ultricies lacus. Maecenas varius augue vitae mauris fringilla efficitur. Sed tempus ante vitae sollicitudin ornare. Sed vitae orci nulla. Morbi metus risus, aliquet et tristique sit amet, laoreet vestibulum neque. Duis interdum varius enim, quis maximus felis pharetra et. Aliquam est enim, vehicula id convallis quis, maximus sed nibh. Maecenas imperdiet rhoncus dolor sed imperdiet. Curabitur facilisis nisi et nulla blandit dapibus. Nam rhoncus vehicula ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</main>
</div>
</div>
</body>
</html>
