left and right sidebars overlapping main content using position:fixed - html

Question

I'm new to CSS.
trying to study some layouts and ran into this issue.
in HTML. I've got
<div id="wrapper">
<aside id="sidebar" class="left">
</aside>
<div class="content">
Lorem ipsum blah blah (cutted: about 100lines)
</div>
<aside id="sidebar" class="right">
</aside>
</div>
I'm trying to prevent the left and right sidebar(aside) from scrolling. No matter how much I scroll the main, it will always stay there; I've set its position to fixed and it looked all fine. the issue is, the main content is overlapping with the right sidebar(aside) when resizing. I've tried position: relative and absolute to the right and changing it to div but nothing happens.
the goal is - when my chrome browser shrinks, it should show the Horizontal/vertical scrollbars without any overlapping of main contents. no matter how long my main content is, the sidebars should always be there! Thank you in advance!
CSS below
body, html {
font-family: Helvetica;
background-color: rgba(0, 0, 0);
}
#sidebar {
position: fixed;
width: 400px;
height: 100%;
margin-top: 120px;
top: 0;
}
.left {
left: 0;
bottom: 0;
background-color: rgb(82, 50, 50);
}
.content {
display: inline-block;
background-color: rgb(255, 255, 255);
margin-top: 120px;
top: 0;
width: 800px;
height:100%;
margin-left: 400px;
margin-right: 400px;
}
.right {
right: 0;
bottom: 0;
background-color: rgb(255, 217, 0);
}
#wrapper {
margin-left:0;
margin-right:0;
max-width: 1600px;
border:1px solid white;
}

Answer 1

You need to give the .content a dynamic width instead of the static one you've set.
Try this
.content {
width: calc(100% - 400px - 400px); /* where 400px and 400px are the width of the sidebars */
}

Answer 2

The problem is you are using position: fixed and you are using px:
An element with position: fixed; is positioned relative to the
viewport, which means it always stays in the same place even if the
page is scrolled. The top, right, bottom, and left properties are used
to position the element.
By using the px, the element size will always be 400px even though the window size is very small. To prevent the content from overlapping to others and keep the same ratio with other elements, you should use % which is the percentage for the container's size and it will keep the same ratio between the aside and div no matter the window size.
Another soluation is to you media screen
The #media CSS at-rule can be used to apply part of a style sheet based on the result of one or more media queries. With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used.
Check more here
If you want to prevent aside from scrolling, just use:
aside{
overflow: hideen
}