Question

我正在尝试装入一个在网格容器内两边都有边距的弹性容器，但是在最小的视口宽度下，flex容器会泄漏出来。我已经为相应的div添加了边框，以显示其泄漏的位置。

我还添加了一个演示来展示我的问题：https://codesandbox.io/s/9z49m3ny0p

如果演示不明确，请查看以下截图：

从上面的屏幕截图中可以看出，红色边框始终位于视口内，但蓝色边框容器会溢出。

Home.js

test()

Home.css

<div id="rightContainer">
    <div id="editorContainer">
        <Notepad />
    </div>
    <div id="notesCardContainer">
        <NoteCard />
        <NoteCard />
    </div>
</div>

Notepad.js ：

#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.css的片段

<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>

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

如何在网格容器中安装Flex容器

1 个答案: