树形列表，父节点展开后，如何使父节点和父节点中的内容不溢出

Question

vue.js做了一个树形列表，但是父节点展开之后会出现内容溢出，display：hidden，也只能隐藏超出的父节点，不能隐藏文字内容，这是为什么呢

这是树形列表的代码

<template>

<div class="side-container">
    <div class="box-container-a">
        <service-box v-for="service in service_show_list" :service-info="service"></service-box>
    </div>
    <div class="card-pagination">
        <input type="button" value="ToPre" class="pre":class=" {'is-disabled' : currentPage === 1 }" @click="updatePageList('prev')">
        <span>{{currentPage}} / {{totalPage}}</span>
        <input type="button" value="ToNext" class="next" :class=" {'is-disabled' : currentPage === totalPage }" @click="updatePageList('next')">
    </div>
</div>
</template>
<script>

import serviceBox from './serviceBox'

const LIST_MAX_LEN = 27;
const LIST_COUNT = 10;

export default {
    data() {
        return {
            service_list: [],
            service_show_list: [],
            currentPage: 1,
            totalPage: 675
        }
    },
    mounted() {
        this.initList(0,(LIST_MAX_LEN*LIST_COUNT))
    },
    methods:{
        //读取列表数据
        initList: function(start,count){
            this.$http.post('/api/user/Return_WMS_list',{
                start: start,
                count: count
            },{}).then(function(response){
                this.service_list = this.service_list.concat(response.body);
                this.refreshShowList();
            })
        },
        //翻页响应函数
        updatePageList(direction) {
            if(direction === 'prev') {
                this.currentPage -= 1;

                if(this.currentPage < 1) {
                    this.currentPage = 1;
                }
            }
            else {
                this.currentPage += 1;

                if(this.currentPage > this.totalPage) {
                    this.currentPage = this.totalPage;
                }
            }

            this.refreshShowList();
        },
        //更新当前页面数据
        refreshShowList() {
            let slice_start = (this.currentPage - 1) * LIST_MAX_LEN;
            let slice_end = (this.currentPage) * LIST_MAX_LEN;

            // last page 
            if(this. currentPage === this.totalPage ) {
                this.service_show_list = this.service_list.slice(-LIST_MAX_LEN);
            }
            else {
                this.service_show_list = this.service_list.slice(slice_start, slice_end);
            } 

            let load_page = (this.service_list.length / LIST_MAX_LEN);
            if (this.currentPage === load_page) {
                let start = load_page*LIST_MAX_LEN;
                let count = LIST_MAX_LEN*LIST_COUNT;
                this.initList(start,count);
            }
        }
    },
    components: {
        serviceBox
    }
}
</script>

<style>
.side-container {
    position: absolute;
    top:0.2%;
    right: 0;
    width: 18%;
    height:99.8%;
    background-color: #1c1c1c;
    z-index: 2;
}
.box-container-a{
    top: 0px;
    height: 95%;
    overflow: hidden;
}
.card-pagination{
    top: 95%;
    color: #000;
    height: 5%;
    width: 100%;
    display: flex;
}
input{
    font-size: 15px;
    margin-top: 4%;  
    border-radius: 2px;
    border-width: 0px;
    height: 25px;
    width: 25%;
    background-color: #454545;
    text-align: center;
}
.pre{
    margin-left: 1%;
}
.next{
    margin-right: 1%;
    background-color: #0066ff;
}
span{
    margin-left: 2%;
    width: 48%;
    text-align: center;
    margin-top: 4%;
    color:#696969;
}
</style>

这是每个节点的组件代码

<template>
<div class="box-container">
    <div class="box">
        <a>{{serviceInfo.Title | LongStringFilter }}</a>
        <a @click="openFolder" class="folder">[{{open ? '-': '+'}}]</a>
    </div>
    <div v-show="open" class="layer-box">
        <div v-for="child in layer_list" class="child">
            <img src="../assets/layer icon.png" class="icon">
            <a>{{child.Name  | LongStringFilter }}</a>
        </div> 
    </div>
</div>
</template>

<script>
import Vue from 'vue'

Vue.filter('LongStringFilter', (value) => {
    let max_length = 20;
    if (typeof value === 'string') {
        if(value.length > max_length) {
            return value.substring(0, max_length) + ' ...';
        }
    }
    return value;
});

export default {
    data() {
        return {
            open:false,
            layer_list: []
        }
    },
    props:['serviceInfo'],
    methods:{
        openFolder(){
            this.open = this.open ? false: true;
            this.$http.post('/api/searchLayer/Search_Layer_By_WMSID',{
                service_id: this.serviceInfo.id
            },{}).then(function(response){
                this.layer_list = response.body;
            })
       }
    }
}
</script>

<style>
.box-container{
    height: auto;
}
.box {
    margin-left: 1%;
    right: 1%;
    height: 25px;
    margin-bottom: 2%;
    border-radius:2px;
    background-color:#454545;    
}
.box a{
    font-size: 12px;
    color: #000;
    margin-top: 3px;
    margin-left:3%;
    display: inline;

}
.box .folder{
    font-size: 12px;
    float: right;
    display: inline;
    margin-left: 89%;
}
.layer-box{
    height: auto;
    width: 98%;
    right: 1%;
    margin-left: 1%;
    background-color: #1C1C1C;
    margin-bottom: 2%;
}
.child{
    height: 16px;
    padding-bottom: 3px;
}
.child a{
    font-size: 12px;
    color:#696969;
    font-weight: bold;
    margin-top: 0px;
    margin-left: 3%;
}
.child .icon{
    width: 14px;
}
</style>

跪求各路大神指点一二~