html - Div 元素滚动而不是在溢出时扩展 :auto

Question

我是一个带有以下 HTML 代码段的 angularJS 应用程序:

<div class="rightNavBarQuiz">

    <div ng-show="showNoteList">

        <div id="noteBar" data-ng-click="viewNote(note); notePreview=!notePreview" ng-repeat="note in notesList" ng-swipe-left="checked = true">
            <div id="noteListScreenshot"></div>
            <div id="noteListTitle">{{note.moduleName}}: {{note.videoName}}</div>
            <div id="noteListStats">Duration: {{note.videoDuration}} Seconds</div>
            <div id="noteText" ng-show="notePreview">{{noteText}}</div>
            <div id="ViewButton"></div>

        <div id="deleteNoteButton" ng-show="checked" ng-swipe-right="checked = false" data-ng-click="deleteNote(note.noteId)">Delete?</div>

        </div>

    </div>

</div>

基本上，单击父 div“noteBar”时，“noteText”div 中的文本会增加并扩展 div。我在使用“noteText”div 扩展“noteBar”时遇到问题。 Over:auto 似乎只是让父 div“noteBar”可滚动，而不是扩展其高度。

下面是“notetext”及其容器“rightNavBarQuiz”、“showNoteList”和“noteBar”的 CSS:

.rightNavBarQuiz{
border-style:solid;
    height: 99%;
    width: 71%;
    float: right;
    position:relative;
    overflow: scroll;
}

#noteBar{
    width:100%;
    height: auto;
    position:relative;
    overflow: auto;
    border-top:1px dotted grey;
    border-bottom:1px dotted grey;
    margin-top:4px;
}

#noteText{
    color: grey;
    position: absolute;
    height:auto;
    width:170px;
    margin-top: 80px;
    margin-left: 113px;
    float:left;
    white-space: pre-wrap;
    word-wrap:break-word;
    overflow:auto;
}

Answer 1

使用

#noteText{
    ...
    overflow:visible;
}

(而不是溢出:自动)