如何使用溢出滚动修复 div 中的高度

Question

我无法通过滚动应用固定高度。当我固定高度容器炸毁所有 div 的高度。如何固定高度 div？修复了容器中的树项目。我修复了容器高度 '200px' 但它不起作用。也许有一些简单的东西，但我看不到。

这是我的简单代码：

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

}

和我的fiddle

Answer 1

改用这个

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

在 &-header 中并从 &-ListItem 中删除 inline-flex 然后您可以将 .container-Atanan 中的 height 设置为您想要的任何值

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

如何使用溢出滚动修复 div 中的高度

How to fix height in div with overflow scroll

sass

overflow

flexbox