Как установить гибкий контейнер внутри контейнера - PullRequest
0 голосов
/ 08 мая 2018

Я пытаюсь поместиться в гибкий контейнер с полями с обеих сторон внутри контейнера сетки, но при наименьшей ширине области просмотра гибкий контейнер просачивается наружу. Я добавил границы к соответствующим элементам div, чтобы показать, где происходит утечка.

Я также добавил демонстрационную версию, чтобы показать мою проблему: https://codesandbox.io/s/9z49m3ny0p

Если демо не ясно, посмотрите на эти скриншоты:

Lowest viewport Medium viewport

Как видно из приведенных выше снимков экрана, красная граница всегда остается в области просмотра, но контейнер с синей рамкой выливается.

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

1 Ответ

0 голосов
/ 08 мая 2018

Взгляните на это: 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% - размеры границ добавляются вместе с помощью calc: https://codesandbox.io/s/l7rk0zop69

#noteTitle {
    width: calc(100% - 6px);
    max-width: calc(100% - 6px);
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...