Прокручиваемые карточки с контейнером высотой 100% с помощью Flexbox - PullRequest
Новая
       29

Прокручиваемые карточки с контейнером высотой 100% с помощью Flexbox

0 голосов
/ 14 июня 2019

Мне бы хотелось, чтобы теги, занимающие 100% страницы, и мои карты можно было прокручивать при переполнении их содержимого.Но я не могу справиться с переполнением карт правильным способом: полоса прокрутки не прокручивается.Все мои контейнеры используют правила flexbox.

Я создал кодовую ручку, чтобы показать вам проблему: https://codepen.io/YseopCSS/pen/dBGPYb

Не могли бы вы мне помочь, пожалуйста? 

<main class="edit-report">
  <header class=header>
    header
  </header>  
  <section class="main__content">  
    <div class="global-filter">global-filter</div>
    <div class="edit-report__edition">
      <div class="edit-report__card data">data</div>
      <div class="edit-report__card table">table</div>
      <div class="edit-report__card report">
        Report<br>
        Report<br>
        Report<br>
        Report<br>
        Report<br>
        Report<br>
        Report<br>
        Report<br>
        Report<br>
        Report<br>
      </div>
    </div>  
  </section>  
</main>

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

.edit-report {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.header {
  padding: 15px 50px;
  background:green;
}

.main {
  &__content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: hidden;
    background: yellow;
  }
}

.global-filter {
  height: 100px;
  background: purple;
}

.edit-report {

  &__edition {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-grow: 1;
  }

  &__card {
    flex: 1 1 25%;
    min-height: 100px;

    &.data {
      background: pink;
    }

    &.table {
      background: violet;
    }

    &.report {
      background: cyan;
      overflow-y: scroll;
    }
  }

}

Ответы [ 2 ]

0 голосов
/ 14 июня 2019

CSS,

Эта ручка может помочь вам. 

<ul>
  <li>
    <img src="http://placekitten.com/280/330"/>
  </li>

  <li>
    <img src="http://placekitten.com/220/300"/>
  </li>

  <li>
    <img src="http://placekitten.com/140/210"/>
  </li>

  <li>
    <img src="http://placekitten.com/140/210"/>
  </li>
  <li>
    <img src="http://placekitten.com/140/210"/>
  </li>
  <li>
    <img src="http://placekitten.com/140/210"/>
  </li>
  <li>
    <img src="http://placekitten.com/140/210"/>
  </li> 


ul {
  display:flex;
  flex-flow: row wrap;

  /* allow scrolling of flex container */
  overflow-x:auto; 

  /* overwrite list container styles */
  margin:2px;
  padding:1em;

  /* color for some visual of the spacing */
  box-shadow:0 0 10px black inset;
}

li {
  /* remove list style bullets */
  list-style-type:none;
  width: 40%;

  /* vertical center with 10px on left and right */
  width: 23%;
  padding: 1%
}
li img {
  width: 100%;
}

https://codepen.io/rusticblonde/pen/QXyjKy

0 голосов
/ 14 июня 2019

После проверки вашего кода я понял, что проблема заключалась в том, что высота на edit-report__card.report не определена, поэтому текущая высота равна 2106px, поэтому прокрутка не работает, даже когда , вы заставляете его с помощью «overflow-y: scroll;», чтобы исправить это, просто добавьте эту строку: 

.edit-report__card.report {  
background: cyan;   
overflow-y: scroll;   
height: 100%;

}

...