css如何讓父元素下的所有子元素高度相同

小穎最近做的項目中要實現一個樣式 ，小穎怕自己忘記了，寫個隨筆記下來

需求父元素下有多個子元素，並且子元素過多時要實現自動換行，給每個子元素都加了右邊框，而每個子元素里的內容多少不一定，這就會產生右邊框的高度不一致，長的長短的短，為了解決這個問題，那就必須讓父元素下的子元素都是等高的，並且高度決定於最高的那個子元素的高度。

其實就只需要給父元素加如下樣式就好了：

        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;

先來看下效果吧：

 

代碼：小穎用的 vue+ Ant Design of Vue  

<template>
    <div>
        <a-row class="css-test-tem">
            <a-col :span="5" v-for="item in dataList" :key="item.id">
                <a-row>
                    <a-col :span="11">
                        <p class="tags-list-name company-name" :title="item.name">
                            {{item.name}}</p>
                    </a-col>
                    <a-col :span="13">
                        <a-row v-for="tags in item.tags" :key="tags.id">
                            <a-col :span="12" class="tags-name" :title="tags.cls">{{tags.cls}}</a-col>
                            <a-col :span="12" class="tags-prob" :title="tags.prob">{{tags.prob}}</a-col>
                        </a-row>
                    </a-col>
                </a-row>
            </a-col>
        </a-row>
    </div>
</template>

<script>
    export default {
        name: "cssTest",
        data() {
            return {
                dataList: [{
                    id: 1,
                    name: '測試1',
                    tags: [{
                        id: 11,
                        cls: 'hand',
                        prob: 1.22222
                    }, {
                        id: 12,
                        cls: 'hand2',
                        prob: 1.3333
                    }, {
                        id: 13,
                        cls: 'hand4',
                        prob: 1.444444
                    }, {
                        id: 14,
                        cls: 'hand5',
                        prob: 1.55555
                    }]
                }, {
                    id: 2,
                    name: '測試2',
                    tags: [{
                        id: 22,
                        cls: 'hand',
                        prob: 1.22222
                    }]
                }, {
                    id: 3,
                    name: '測試3',
                    tags: [{
                        id: 31,
                        cls: 'hand',
                        prob: 1.22222
                    }, {
                        id: 32,
                        cls: 'hand2',
                        prob: 1.3333
                    }, {
                        id: 33,
                        cls: 'hand4',
                        prob: 1.444444
                    }, {
                        id: 34,
                        cls: 'hand5',
                        prob: 1.55555
                    }, {
                        id: 35,
                        cls: 'hand6',
                        prob: 1.666666
                    }]
                }]
            }
        }
    }
</script>

<style scoped lang="scss">
    .css-test-tem {
        width: 900px;
        margin: 0 auto;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        color: #333;
        .ant-col-5{
            padding: 20px 10px;
            border-right: 1px solid #afabac;
        }
        .tags-name{
            padding-right: 5px;
        }
        .company-name,
        .tags-name,
        .tags-prob {
            cursor: default;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
</style>