How to used position fixed without overlapping the width of container - html

Question

Here is the codepen. As you can see using position: sticky; the div width is not overlapping. However when I tried using position: fixed the div width is overlapping. Can anyone help me with how to achieve it? My goal is I what my footer class to fixed at the bottom even I scroll.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-size: inherit;
}
.left {
position: fixed;
top: 0;
width: 43px;
left: 0;
bottom: 0;
/* border-right: 1px solid #e8edf3; */
background-color: red;
padding: 6px;
overflow: hidden;
transition: .18s ease-out width;
}
.main {
margin: 0;
padding: 0;
position: absolute;
top: 0;
left: 42px;
right: 0;
bottom: 0;
overflow: auto;
transition: .22s ease left;
background: green;
}
.tool {
display: flex;
padding: 3px 4px;
/* box-sizing: border-box; */
align-items: center;
width: 100%;
border-bottom: 1px solid #e8edf3;
position: sticky;
top: 0;
background-color: #ffffff;
z-index: 13;
justify-content: space-between;
}
.footer {
padding: 3px 4px;
align-items: center;
width: 100%;
border-bottom: 1px solid #e8edf3;
position: fixed;
bottom: 0;
background-color: #ffffff;
z-index: 13;
display: flex;
justify-content: space-between;
}
<div class="left">
</div>
<div class="main">
<div class="tool">
<div class="test">Test toolbar design</div>
<div class="test">Test toolbar design</div>
</div>
<div class="footer">
<div class="test">Test footer design</div>
<div class="test">Test footer design</div>
</div>
<div>

Answer 1

Change the footer width to width: calc(100% - 43px);. Where 43px is the value of the left property of its relative parent (.main).
.footer {
width: calc(100% - 43px);
}
.left.expand ~ .main .footer {
width: calc(100% - 320px);
}