如何在网格容器内安装弹性容器

Question

我正在尝试在网格容器内的两侧都有边距的 flex 容器中进行调整，但是在最小的视口宽度处，flex 容器会泄漏出来。我为各个 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;
}

Answer 1

看看这个： 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%;
}

如果您还想调整边框问题，请将宽度设置为 100% - 边框大小通过计算相加：https://codesandbox.io/s/l7rk0zop69

#noteTitle {
    width: calc(100% - 6px);
    max-width: calc(100% - 6px);
}