如何将弹性容器放入网格容器中

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);
}

如何将弹性容器放入网格容器中

How to fit a flex container inside a grid container

css

flexbox

reactjs

css-grid