Как исправить высоту в div с помощью переполнения - PullRequest
Новая
       21

Как исправить высоту в div с помощью переполнения

0 голосов
/ 25 февраля 2019

Я не могу применить фиксированную высоту с помощью прокрутки.Когда я установлю высоту контейнера, взорву всю высоту div.Как я могу фиксировать высоту div?Исправлены элементы дерева в контейнере.Я установил фиксированную высоту контейнера «200 пикселей», но она не работает.Может быть, есть что-то простое, но я не вижу.

Вот мой простой код: 

<div class="container-Atanan">
  <div class="container-Atanan-Header">
    <i class="fas fa-american-sign-language-interpreting fa-2x"></i>
    <div class="container-Atanan-Header-Title"><span>Başlık</span></div>
  </div>
  <div class="container-Atanan-ListItem">
    <a class="listItem" href="#">
      <div class="container-Atanan-ListItem-Avatar">
        <img src="https://cdn.vuetifyjs.com/images/lists/1.jpg" alt="">
      </div>
      <div class="container-Atanan-ListItem-Content">
        <div class="Content-Title">Lorem ipsum.</div>
        <div class="Content-Subtitle">
          <span>Lorem ipsum dolor sit. <span class="italic">-25.2.2019</span></span>
          <span class="italic oldline">Lorem ipsum dolor sit amet. </span>
        </div>
      </div>
    </a>
  </div>

и мой scss: 

.container-Atanan {
    box-shadow:0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    // background-color : #7AD3B1;
    width: 470px;
    height: 80%;
    overflow: auto;
    padding-bottom : 30px;
    font-family: 'Roboto', sans-serif;
    &-Header {
        display: inline-flex;
        background-color: #e2e2e2;
        height: 50px;
        align-items: center;
        &-Title{
            padding:15px;
        }
    }
    &-ListItem{

        display: inline-flex;
        .listItem{
            display: inline-flex;
            width: 100%;
            height: 72px;
            text-decoration: none;
            color:black;
            padding: 15px 15px;
        }
        &-Avatar {
            margin-right: 10px;
            display: inline-flex;
            align-items: center;
            img{
                border-radius: 50%;
                width: 40px;
                height: auto;
            }
        }
        &-Content {
            display: inline-flex;
            padding-right: 30px;
            flex-direction: column;
            justify-content: center;
            padding-left:10px;
            width: 362px;
            height: 72px;
            box-shadow: 0 8px 6px -20px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);
            transition: background-color 0.5s ease-out;
            .Content-Title{
               font-weight: 500;
            }
            .Content-Subtitle {
                font-weight: 300;
                display: inline-flex;
                flex-direction: column;
                .italic{
                 font-weight : lighter;
                font-style: italic;
                font-size :1em;
                }
                .oldline{
                    text-decoration:line-through;
                }

            }
                &:hover{
                   background: rgba(0,0,0,0.05)
                }

        }
    }
    .divider{
        display: block;
        margin-left: 72px;
        border: solid;
        border-width: thin 0 0 0;
         margin-left: 0;
         margin-right: 0;
         margin-bottom : 0;
        &-Light{
            border-color: rgba(0,0,0,0.12);
        }
    }

}

и мой скрипка

1 Ответ

0 голосов
/ 25 февраля 2019

Используйте это вместо 

        display:grid;
        grid-template-columns :max-content max-content;

In &-header и удалите inline-flex из &-ListItem, и вы можете установить height in .container-Atanan на любое значение, которое вы хотите 

body{
    background-color:#FEFCFC;
}
.container-Atanan {
    box-shadow:0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    // background-color : #7AD3B1;
    width: 470px;
   height:350px;
    overflow: auto;
    padding-bottom : 30px;
    font-family: 'Roboto', sans-serif;
    &-Header {
        display:grid;
        grid-template-columns :max-content max-content;
        background-color: #e2e2e2;
        height: 50px;
        align-items: center;
        &-Title{
            padding:15px;
        }
    }
    &-ListItem{


        .listItem{
            display: inline-flex;
            width: 100%;
            height: 72px;
            text-decoration: none;
            color:black;
            padding: 15px 15px;
        }
        &-Avatar {
            margin-right: 10px;
            display: inline-flex;
            align-items: center;
            img{
                border-radius: 50%;
                width: 40px;
                height: auto;
            }
        }
        &-Content {
            display: inline-flex;
            padding-right: 30px;
            flex-direction: column;
            justify-content: center;
            padding-left:10px;
            width: 362px;
            height: 72px;
            box-shadow: 0 8px 6px -20px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);
            transition: background-color 0.5s ease-out;
            .Content-Title{
               font-weight: 500;
            }
            .Content-Subtitle {
                font-weight: 300;
                display: inline-flex;
                flex-direction: column;
                .italic{
                 font-weight : lighter;
                font-style: italic;
                font-size :1em;
                }
                .oldline{
                    text-decoration:line-through;
                }

            }
                &:hover{
                   background: rgba(0,0,0,0.05)
                }

        }
    }
    .divider{
        display: block;
        margin-left: 72px;
        border: solid;
        border-width: thin 0 0 0;
         margin-left: 0;
         margin-right: 0;
         margin-bottom : 0;
        &-Light{
            border-color: rgba(0,0,0,0.12);
        }
    }

}

JSFIDDLE

...