diff --git a/registry/lib/components/style/custom-navbar/home/NavbarHome.vue b/registry/lib/components/style/custom-navbar/home/NavbarHome.vue index 23fbb47a1..c46ba413f 100644 --- a/registry/lib/components/style/custom-navbar/home/NavbarHome.vue +++ b/registry/lib/components/style/custom-navbar/home/NavbarHome.vue @@ -76,9 +76,18 @@ export default Vue.extend({ .custom-navbar .home-popup { max-height: 75vh; display: flex; - flex-direction: column; flex-wrap: wrap; - width: 300px; + + // flex 布局纵向排列换行无法撑开父元素的水平长度(浏览器 bug),用此方式绕过 + // 相关链接: + // 1. https://www.cnblogs.com/ccti7/p/14687477.html + // 2. https://stackoverflow.com/a/41209546/13860169 + // 3. https://stackoverflow.com/a/33899301/13860169 + flex-direction: row; + writing-mode: vertical-lr; + &>* { + writing-mode: horizontal-tb + } .category-item { border-radius: 8px; @@ -137,10 +146,5 @@ export default Vue.extend({ font-size: 14px; } } - @media screen and (max-height: 600px) { - & { - width: 450px; - } - } }