史诗级大无语事件之火狐对于flex的兼容性问题，flex-flow: colum wrap；不计算排序后的宽的问题

需求

是一个导航下展开的下导航，因为获取的栏目数量不确定，所以需要进行排列，排列也不能确定每一块的宽度是多少
谷歌下显示内容

火狐下显示内容

实现及问题

在火狐浏览器中
实现纵向自动排列
使用flex弹性布局
flex-direction 设置为cloum
flex-warp 设置为warp
在谷歌浏览中可以自动换列并且没有任何问题
但是在火狐里面子元素换列之后父元素的宽没有撑开 还是保持着单列的宽度
我认为的原因是在火狐中设置flex没有触发重排和重绘，可能是有什么优化机制
解决方法试了很多种

1. display: -webkit-flex;毫无作用
2. 设置min-width；有点作用，但是没有触发重排
3. 使用dom设置元素的宽高之类的，想手动触发重排，无效
4. 父元素writing-mode: vertical-lr !important;子元素writing-mode: horizontal-tb !important;这种方法可以排列出flex-flow: colum wrap一样的效果，但是不能触发重排
5. 方法4和方法3同时写上之后在浏览器的f12中来回取消选中可以触发重排，样式就和谷歌一样了
   注：
   到这里我就大概有了一点思路，只要我在渲染完之后给元素赋值min-width=0就可以做到
   在之后的努力下试过了各种生命周期（mounted，数据加载后等等），元素加载的一些方法，都没有解决，可能是没监听到最终展示
   最后的最后使用了定时器解决问题，多执行了几次

注：在火狐浏览器中只设置flex-flow: colum wrap；也不行，必须是writing-mode和flex-flow: row wrap；一起设置上，并且设置min-width才行

代码：

1 页面的循环，就是一个传统的循环

			<div
				class="navTables"
				id="navTables"
				@mouseleave="handleMouseLeave1"
			>
				<div
					:class="
						item.uid == 'A10305'
							? 'tablecol specialcol'
							: 'tablecol'
					"
					id="tablecol"
					v-for="(item, index) in downTable"
					:key="index"
				>
					<a
						class="tablecolA"
						href="javascript:void(0)"
						@click="spicalTopicRDLink(item)"
						>{{ item.text }}</a
					>
					<ul class="tablerows" id="tablerows">
						<li
							class="tablerow"
							v-for="(rows, indexs) in item.children"
							:key="indexs"
						>
							<a
								v-if="rows.isnav"
								class="tablerowA"
								:href="getAlink(rows.url, rows.uid)"
								:target="getAtarget(rows.url)"
								:style="{
									color:
										rows.uid == 'A1020101' ||
										rows.uid == 'A1020108' ||
										rows.uid == 'A1020113'
											? '#3edffc'
											: '',
								}"
								@click="reLink(rows.url, rows.uid)"
								>{{ rows.text }}
								<img
									v-if="rows.shownew"
									src="../../assets/homeImage/listnews.gif"
									alt=""
								/>
							</a>
						</li>
					</ul>
				</div>
			</div>

2开启定时和关闭定时，注意触发事件和频率

我是在鼠标移入元素之后触发了定时器，定时器会以0.001秒一次的速度执行5次然后停止

		openInterval() {
			var time = 0;
			this.intervalId = setInterval(() => {
				time += 1;
				// 这里可以是任何数据计算逻辑
				this.$nextTick(() => {
					let alltables =
						document.getElementsByClassName('tablerows');
					for (let index = 0; index < alltables.length; index++) {
						const element = alltables[index];
						element.style.minWidth = 0;
					}
				});
				if (time >= 5) {
					this.stopInterval();
				}
			}, 1); // 每0.001秒更新一次
		},
		stopInterval() {
			clearInterval(this.intervalId);
			this.intervalId = null;
			this.$nextTick(() => {
				let alltables = document.getElementsByClassName('tablerows');
				for (let index = 0; index < alltables.length; index++) {
					const element = alltables[index];
					element.style.minWidth = '1px';
				}
			});
		},

3css样式

其实在chrome里面用不到writing-mode

	.tablecol {
		margin-right: 30px;
		display: block;
		box-sizing: border-box;
		min-width: 0;
		// width: 100%;
		.tablecolA {
			color: #fff;
			font-size: 16px;
			font-weight: bold;
			padding: 0px 0 5px 0;
			border-bottom: 1px solid #3c5e96;
			margin-bottom: 5px;
			display: block;
		}
		.tablerows {
			min-width: 0;
			height: 370px;

			display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */

			// flex-direction: row;
			flex-flow: row wrap;
			// flex-wrap: wrap;
			writing-mode: vertical-lr !important;
			// flex: 1;
			// width: 100%;

			// flex-direction: column;
			// flex-wrap: wrap;

			.tablerow {
				min-width: 0;
				line-height: 30px;
				padding-right: 13px;
				writing-mode: horizontal-tb !important;
				// display: inline-block;
				display: block;
				// flex: 1;
				.tablerowA {
					color: #c8e2f5;
					// display: inline-block;
					line-height: 36px;
					font-size: 15px;
				}
				.tablerowA:hover {
					color: #39f;
				}
			}
		}
	}

一定要注意触发时机和及时关闭