In the flex column direction, the content cannot support the big hole of the parent element after the wrap automatically changes columns

I. Introduction

Requirements : The height of the overall container is fixed, 6 products are displayed in one column, and the number of columns is not fixed.

The effect is as follows (the number of columns is not fixed, 3 or 4): 

2. Thinking 

So I thought it would be easy~, use flex layout, set flex-direction to column (column), then fix the height of the box and the height of each item, and then set the height to be not enough to automatically change the column, it will be solved. . . But after a meal, I found that the content here is correct, but the content inside does not open the outer container, as shown in the figure below.

So I checked, many people have encountered this problem, it seems to be a small problem with flex. This way is not working, so I followed the big guys and changed to another method, using the writing-mode property in css to achieve this. This property defines the horizontal or vertical arrangement of the text and the direction of the text in the block-level element.

3. Solution:

Html main code:

<div class="home-category-detail" @mouseleave="leave()" v-show="isShowCategoryDetail" @mouseenter="showCategoryDetailFn">
    <a :href="item.href" v-for="(item,index) in homeCategoryDetail" :key="'phoneNavList' + index" >
          <img :src="item.src" :alt="item.name">
          <span style="display:inline-block;">{
   
   {item.name}}</span>
    </a>
</div>

css:

Set writing-mode: vertical-lr on the outermost parent element ( home-category-detail ) , that is, the content is arranged vertically and left-aligned. Then you will find that the img and span in the a tag are also arranged from top to bottom. At this time, you need  to add writing-mode: horizontal-tb to the a  tag . The following is my css part, for reference only.

.home-category-detail {
    height: 460px;
    width: auto;
    background: #fff;
    position: absolute;
    top: 0;
    left: 234px;
    writing-mode: vertical-lr;
    box-shadow: #b0b0b0 3px 5px 10px;
    a {
        height: 70px;
        width: 228px;
        text-align: left;
        padding-left: 20px;
        color: #333;
        writing-mode: horizontal-tb;
        line-height: 70px;
        img {
            height: 50px;
            width: 50px;
            vertical-align: middle;
        }
    }
}