How to fit a flex container inside a grid container - reactjs

Question

I am trying to fit in a flex container with margins on both sides inside a grid container, but at the smallest viewport width the flex container leaks out. I have added borders to the respective divs to show where its leaking.
I have also added a demo to show my problem: https://codesandbox.io/s/9z49m3ny0p
If the demo isn't clear, take a look at these screenshots:
As you see from the above screenshots, that the red border stays within the viewport at all times but the blue bordered container spills out.
Home.js
<div id="rightContainer">
<div id="editorContainer">
<Notepad />
</div>
<div id="notesCardContainer">
<NoteCard />
<NoteCard />
</div>
</div>
Home.css
#editorContainer {
display: grid;
width: 100%;
position: relative;
border: 1px solid red;
}
#notesCardContainer {
display: grid;
width: 100%;
grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
flex-direction: row;
justify-content: space-evenly;
padding-bottom: 60px;
}
And Notepad.js :
<div className="editorInnerContainer">
<div className="editorTop">
<input
type="text"
id="noteTitle"
value="Some Title"
disabled={true}
/>
<div id="tools">
<a href="" title="Edit this note">
<i className="fas fa-pencil-alt" />
</a>
<a href="" title="Delete this note">
<i className="fas fa-trash" />
</a>
<a href="" title="Download this note">
<i className="fas fa-download" />
</a>
<a href="" title="Share this note">
<i className="fas fa-share-square" />
</a>
</div>
</div>
</div>
Snippet from Notepad.css
.editorInnerContainer {
display: flex;
flex-direction: column;
background-color: var(--white-100);
padding: 20px;
margin-left: 20px;
margin-right: 20px;
margin-top: 50px;
border-radius: 5px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.14);
border: 1px solid blue;
}

Answer 1

Take a look at this:
https://codesandbox.io/s/2v0o67w4kn
#noteTitle {
flex: 1;
height: 60px;
font-size: 18px;
line-height: 17px;
font-weight: 700;
border: none;
color: var(--black);
border: 2px solid sandybrown;
/* add width */
width: 100%;
max-width: 100%;
}
If you want to adjust the border issue as well, set the width to 100% - the border sizes added together via calc: https://codesandbox.io/s/l7rk0zop69
#noteTitle {
width: calc(100% - 6px);
max-width: calc(100% - 6px);
}