writing_mode:vertical-lr和flex-direction布局以及蒙古文展示

蒙古文是从上到下，从左到右书写的，所以一般布局中，div布局要横向排列。这时我一般都是父div为flex-direction：row

.category_1{
            background: blueviolet;
        }
        
.category_2{
     background: #fd0101;
 }
 
 .detail{
     display: inline-block;
 }
 
.flex_test{
            display: flex;
            flex-direction: row;
            height: 100%;
}

<div class="flex_test">
        <div class="category_1">
            <div class="detail">
                mongol
            </div>
            <div class="detail">
                mongol
            </div>
            <div class="detail">
                mongol
            </div>
        </div>

        <div class="category_2">
            <div class="detail">
                mongol
            </div>
            <div class="detail">
                mongol
            </div>
            <div class="detail">
                mongol
            </div>
        </div>
    </div>

这代码对于横向排列没有问题。但是为了竖向显示蒙古文加入writing-mode的话引起二级div会像默认块级元素一样竖向排列；

.flex_test{
            display: flex;
            flex-direction: row;
            height: 100%;
            writing-mode: vertical-lr;
}

这时效果会变成

可以看出来蒙古文是可以书香显示，但是二级元素category1和2变了原来横向排列的格式，变成了竖向排列了。

因为我的需求是在二级div即category类里动态添加detail类的inline-block div。

在最外部为flex布局下，为了完成我的需求，我把writing-mode移到内部。
这里有2种思路，
一是，最内部detail里加入wrting-mode，可以自动撑开外部父div，但是detai虽然为inline-block但占据一个列，并会靠在下方不是我要的需求。

二是，category里加入wrting-mode，但是这会导致新增加的子div不会自动撑开外部category的div。

到了这里，死活都满足不了需求。
想过通过计算宽度等动态改变父元素的宽度。可是太麻烦了。

后面随便调试了一下。

终于看出曙光了。

最外部布局不加入flex，直接writing-mode：vertical-lr;

最外部父元素加一句writing-mode：vertical-lr;

这样不仅解决了，二级div横向排列，还解决了内部动态添加子div时自动撑开的问题。

即：

.flex_test{
            height: 100%;
            writing-mode: vertical-lr;
}

想放弃过，可是最后总是碰巧能解决。这说明有时候再坚持一下就可以了。。祝好运！！