CSS ячейка элемента сетки расширяется вместо переполнения - PullRequest
Новая
       10

CSS ячейка элемента сетки расширяется вместо переполнения

0 голосов
/ 24 апреля 2020

У меня есть сетка css: 

|-------|-------------------|
|-------|                   |
|       |      overflow     | 
|-------|-------------------|
|-------|-------------------|

И я не могу остановить рост "переполнения", в основном он всегда расширяется, несмотря на то, что установил: 

overflow: auto;

в css. Как этого добиться? Фрагмент ниже. 

html {
  font-size: 22px;
}
body {
  padding: 1rem;
/*   grid-template-columns: 1fr 3fr; */
}

.wrapper {
  max-height: 70vh;
  padding: 1rem;
}

.header {
  background-color: red;
  color: white;
  padding: 1rem;
  height: 2rem;
  resize: horizontal;
  grid-area: 1 / 1 / 2 / 2;
}

.nav {
  background-color: lightgrey;
  color: baclk;
  padding: 1rem;
  height: 4rem;
  overflow: auto;
  min-width: 12rem;
  resize: horizontal;
  grid-area: 2 / 1 / 3 / 2;
}

.scroll {
  background-color: dodgerblue;
  color: white;
  padding: 1rem;
  overflow: auto;  
  grid-area: 1 / 2 / 3 / 3;
}

.prev {
  background-color: black;
  color: white;
  padding: 1rem;
  height: 4rem;
  grid: 3 / 1 / 4 / 2; 
}

.select {
  background-color: lightgrey;
  color: white;
  padding: 1rem;
  height: 4rem;
  grid-area: 4 2 4 4;
}

.cards {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-gap: 0.5rem;
}

/* Screen larger than 600px? 2 column */
@media (min-width: 600px) {
  .cards {
    grid-template-columns: 1fr 3fr;
  }
}
<div class="wrapper">
  <div class="cards">
    <div class="header">HEADER</div>
    <div class="scroll">
      <p>111</p>
      <p>222</p>
      <p>333</p>
      <p>444</p>
      <p>555</p>
     <!--   <p>666</p>
     <p>777</p>
      <p>888</p>
      <p>999</p> -->
    </div>
    <div class="nav">NAV</div>
    <div class="prev">PREVIEW</div>
    <div class="select">SELECT</div>
  </div>
</div>

1 Ответ

0 голосов
/ 24 апреля 2020

Оказалось, что решение состоит в том, чтобы добавить одну строку к определению сетки: 

grid-template-rows: auto 1fr auto;

Это дает хороший макет, когда область «прокрутки» переполняется, а сетка масштабируется, как и ожидалось. Обновленный фрагмент ниже. 

html {
  font-size: 22px;
}
body {
  padding: 1rem;
  overflow: hidden;
/*   grid-template-columns: 1fr 3fr; */
}

.header {
  background-color: red;
  color: white;
  padding: 1rem;
  height: 2rem;
  grid-area: 1 / 1 / 2 / 2;
}

.nav {
  background-color: lightgrey;
  color: baclk;
  padding: 1rem;
  height: auto;
  overflow: auto;
  min-width: 12rem;
  resize: horizontal;
  grid-area: 2 / 1 / 3 / 2;
}

.scroll {
  background-color: dodgerblue;
  color: white;
  padding: 1rem;
  overflow: auto; 
  max-height: 70vh;
  grid-area: 1 / 2 / 3 / 3;
}

.prev {
  background-color: black;
  color: white;
  padding: 1rem;
  max-height: 30vh;
  grid: 3 / 1 / 4 / 2; 
}

.select {
  background-color: lightgrey;
  color: white;
  padding: 1rem;
  height: 4rem;
  grid-area: 4 2 4 4;
}

.cards {
  max-width: 80vw;
  height: 90vh;
  margin: 0 auto;
  display: grid;
  grid-gap: 0.5rem;
}

/* Screen larger than 600px? 2 column */
@media (min-width: 600px) {
  .cards {
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto 1fr auto;
  }
}
<div class="wrapper">
  <div class="cards">
    <div class="header">HEADER</div>
    <div class="scroll">
      <p>111</p>
      <p>222</p>
       <p>333</p>
      <p>444</p>
      <p>555</p>
      <p>666</p>
      <p>777</p>
  <!--    <p>888</p>
      <p>999</p> -->
    </div>
    <div class="nav">NAV</div>
    <div class="prev">PREVIEW</div>
    <div class="select">SELECT</div>
  </div>
</div>
...