Поток: столбец Flexbox разрывается внутри дисплея: сетка Контейнер - PullRequest
Новая
       12

Поток: столбец Flexbox разрывается внутри дисплея: сетка Контейнер

0 голосов
/ 26 декабря 2018

Я хочу интегрировать макет, подобный этому https://jsfiddle.net/przemcio/xLhLuzf9/3/, в более крупный макет CSS-сетки.Однако все это ломается, как только контейнер имеет свойство display: grid.Под «перерывами» я подразумеваю, что требуемые свойства сжатия в flexbox элемента .content не применяются, и он не сжимается и не позволяет содержимому нижнего колонтитула отображаться выше сгиба прокрутки.

Это скелетдемо, но в моем большом приложении такое же поведение.Почему CSS Grid нарушает этот вид макета, даже внутри дочерней ячейки, и как я могу это исправить?

Демонстрация: 

html,
body {
  height: 100%;
  margin: 0
}

.grid {
  /* this line breaks it: */
  display: grid;
  height: 100vh;
}

.cell {
  height: 100%;
  display: block;
  grid-column-end: span 1;
  grid-row-end: span 1;
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.content {
  flex: 1 1 auto;
  overflow-y: auto;
  border-bottom: 1px solid gray;
}

.footer {
  flex: 0 1 auto;
}
<!DOCTYPE html>
<html>

<body>
  <div class="grid">
    <div class="cell">
      <div class="box">
        <div class="content">
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
        </div>
        <div class="footer">
          <p><b>footer</b>
            <br>
            <br>(sized to content)</p>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

1 Ответ

0 голосов
/ 26 декабря 2018

Нет необходимости указывать height:100% для элемента сетки, так как он создаст неожиданный результат .Затем вы должны скрыть переполнение или включить прокрутку. 

html,
body {
  height: 100%;
  margin: 0
}

.grid {
  /* this line breaks it: */
  display: grid;
  height: 100vh;
}

.cell {
  /*height: 100%;*/
  overflow:auto;
  /*display: block; not needed*/
  grid-column-end: span 1;
  grid-row-end: span 1;
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.content {
  flex: 1 1 auto;
  overflow-y: auto;
  border-bottom: 1px solid gray;
}

.footer {
  flex: 0 1 auto;
}
<!DOCTYPE html>
<html>

<body>
  <div class="grid">
    <div class="cell">
      <div class="box">
        <div class="content">
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
        </div>
        <div class="footer">
          <p><b>footer</b>
            <br>
            <br>(sized to content)</p>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

Вы также можете оставить height:100% и указать 100vh в шаблоне строк.В этом случае процентная высота будет вести себя как положено: 

html,
body {
  height: 100%;
  margin: 0
}

.grid {
  /* this line breaks it: */
  display: grid;
  grid-template-rows:100vh;
}

.cell {
  height: 100%;
  /*display: block; not needed*/
  grid-column-end: span 1;
  grid-row-end: span 1;
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.content {
  flex: 1 1 auto;
  overflow-y: auto;
  border-bottom: 1px solid gray;
}

.footer {
  flex: 0 1 auto;
}
<!DOCTYPE html>
<html>

<body>
  <div class="grid">
    <div class="cell">
      <div class="box">
        <div class="content">
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
        </div>
        <div class="footer">
          <p><b>footer</b>
            <br>
            <br>(sized to content)</p>
        </div>
      </div>
    </div>
  </div>

</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...