I've made a sidebar layout with using css flexbox and would like to affix the sidebar position, but allow the main content area to both horizontally and vertically scroll. Using overflow: hidden on the parent container and overflow:auto on the content container allows for vertical scrolling, but does not allow for horizontal scrolling. Codepen
body {
background-color: lightgrey;
}
.container {
display: flex;
height: 100vh;
width: 720px;
margin: auto;
border: 1px black solid;
overflow: auto;
}
.sidebar {
background-color: #f00;
border: 1px red solid;
flex-basis: 250px;
flex-grow: 0;
flex-shrink: 0;
}
.content {
display: flex;
flex: 1 0 auto;
overflow: auto;
}
.wide-content {
width: 800px;
background-color: lightpink;
overflow: auto;
}<div >
<div >
Sidebar
</div>
<div >
<div >
<p>
"On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal
blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled
and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that
pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains."
</p>
<p>
"On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal
blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled
and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that
pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains."
</p>
</div>
</div>
</div>Alternatively, using overflow: auto on the parent container allows for vertical scrolling and horizontal scrolling, but the sidebar moves as well. Codepen
body {
background-color: lightgrey;
}
.container {
display: flex;
height: 100vh;
width: 720px;
margin: auto;
border: 1px black solid;
overflow: hidden;
}
.sidebar {
background-color: #f00;
border: 1px red solid;
flex-basis: 250px;
flex-grow: 0;
flex-shrink: 0;
}
.content {
display: flex;
flex: 1 0 auto;
overflow: auto;
}
.wide-content {
width: 800px;
background-color: lightpink;
overflow: auto;
}<div >
<div >
Sidebar
</div>
<div >
<div >
<p>
"On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal
blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled
and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that
pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains."
</p>
<p>
"On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal
blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled
and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that
pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains."
</p>
</div>
</div>
</div>Is there a solution using flexbox to allow for both vertical and horizontal scrolling while keeping the sidebar in the same place?
Thank you!
CodePudding user response：
Kind of ugly but perhaps you can style it better. sticky left top;
Might need to adjust the side bar size a bit; clean up the overflow etc. But perhaps a good starting point with some stripped down CSS.
body {
background-color: lightgrey;
overflow: hidden;
}
.container {
display: flex;
column-gap: 1rem;
height: 110vh;
width: 720px;
margin: auto;
border: 1px black solid;
overflow: scroll;
}
.sidebar {
background-color: #ff8888;
border: 1px red solid;
height: 95vh;
width: 100px;
position: sticky;
top: 0;
left: 0
}
.content {
height: 150vh;
display: flex;
flex: 1 0 auto;
}
.wide-content {
width: 800px;
background-color: #ffdddd;
}<div >
<div >
Sidebar
</div>
<div >
<div >
<p>
"On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal
blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled
and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that
pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains."
</p>
<p>
"On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal
blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled
and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that
pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains."
</p>
</div>
</div>
</div>CodePudding user response：
It sounds like what you are looking for is overflow-x: scroll and overflow-y: scroll
overflow-x: scroll;
overflow-y: scroll;
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x
CodePudding user response：
This is actually a great example for display: grid. You can designate a column for the sidebar and then set the vertical and horizontal scroll bars for <div >
Generally, display: grid is great for static layouts while display: flex works better with responsive layouts, in this case, it sounds like you're working on something static.
It's a little bit cleaner and you also have your horizontal scrolling. I'm not sure if it's best practice to allow horizontal scrolling for large bodies of text, so if you change your mind just go ahead and delete the p styling in the CSS.
p {
width: 600px;
}
body {
background-color: lightgrey;
}
p {
width: 600px;
}
.container {
height: 400px;
width: 500px;
margin: auto;
border: 1px black solid;
display: grid;
grid-template: auto / 150px auto;
}
.sidebar {
background-color: #f00;
border: 1px red solid;
}
.content {
display: flex;
flex: 1 0 auto;
overflow: hidden;
}
.wide-content {
width: 800px;
background-color: lightpink;
overflow: auto;
}<div >
<div >
Sidebar
</div>
<div >
<div >
<p>
"On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal
blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled
and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that
pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains."
</p>
<p>
"On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal
blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled
and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that
pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains."
</p>
</div>
</div>
</div>I reduced the overall size of <div > to allow for more scrolling, but of course you can just change the values to whatever you like.