css - Vue JS v-for 生成的组件不延伸座高(overflow-y)

Question

我制作了一个小笔记应用程序，用户可以在其中添加和编辑笔记。此笔记应用程序位于可以切换的侧边栏内(twitter bootstrap)。

问题就在这里，如果用户添加的注释多于侧边高度内无法显示的注释，则侧边不会通过使其可滚动来扩展。它们只是显示在页面的可见区域之外。

我已经使用硬编码组件对其进行了测试，这些组件通过使其可滚动来扩展侧边高度。就像 Vue 生成的组件无法识别。

html

<aside class="control-sidebar control-sidebar-dark" id="notes_sidebar">
                <div class="tab-content">

                    <div class="col-md-3">
                        <h2 class="control-sidebar-heading">
                            Your Notes
                        </h2>

                        <ul class="control-sidebar-menu">

                            <li>
                                <a @click="addNote()">
                                    <i class="menu-icon fa fa-plus bg-green"></i>
                                    <div class="menu-info">
                                        <h4 class="control-sidebar-subheading">New Note</h4>
                                    </div>
                                </a>
                            </li>

                            <li v-for="note in notes" transition="fade">
                                <a @click="setActive($index)">
                                    <i class="menu-icon fa fa-sticky-note-o bg-yellow"></i>
                                    <div class="menu-info">
                                        <h4 class="control-sidebar-subheading">{?{ note.name }?}</h4>
                                        <p>{?{ note.date }?} <span class="fa fa-minus-circle fa-2x pull-right text-red" @click="deleteNote($index)"></span></p>
                                    </div>
                                </a>
                            </li>

                        </ul>

                    </div>
...

有谁知道为什么会发生这种情况以及如何使 vue 生成的组件也可以溢出滚动？

Answer 1

您可以检查是否有任何容器有高度限制。 我遇到了类似的问题，然后发现父容器上有“最大高度”。