Я пытаюсь поместиться в гибкий контейнер с полями с обеих сторон внутри контейнера сетки, но при наименьшей ширине области просмотра гибкий контейнер просачивается наружу. Я добавил границы к соответствующим элементам div, чтобы показать, где происходит утечка.
Я также добавил демонстрационную версию, чтобы показать мою проблему: https://codesandbox.io/s/9z49m3ny0p
Если демо не ясно, посмотрите на эти скриншоты:
Как видно из приведенных выше снимков экрана, красная граница всегда остается в области просмотра, но контейнер с синей рамкой выливается.
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;
}
И 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>
Фрагмент из 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;
}