div并排显示,内容过长时的处理

	<div class="container">
		<div class="charts">

		</div>
		<div class="all-top5">
			<div v-for="(item, index) in dataDetails" :key="index" class="all-top5-title">
				<el-link
					href="#"
					target="_blank"
					type="primary"
					class="link-style"
					:underline="false"
					:title="item.label"   <!-- 添加 title 属性来显示完整文本 --> 
					@click="handleClick('top5', '')"
					>{{ item.label.length > 13 ? item.label.substring(0, 13) + '...' : item.label }}</el-link
				>
				<div class="score-style">
					<img class="pre-image" src="" />
					<span>{{ item.score }}</span>
				</div>
			</div>
		</div>
	</div>

	.container {
		display: flex;  //Flexbox布局
		width: 100%;
		height: calc(100% - 121px);

		.charts {
			flex: 1; //第一个盒子， 允许元素占用剩余空间
			overflow: hidden;
		}

		.all-top5 {
			flex: 0 0 320px; //第二个盒子 固定宽度为30px
			margin-top: 72px;
			margin-bottom: 42px;
			overflow: auto;

			.pre-image {
				width: 4.62px;
				height: 8.56px;
				margin-right: 1px;
			}

			.all-top5-title {
				display: flex;
				line-height: 2;

				.link-style {
					flex: 1;
					justify-content: flex-start;
					text-decoration: underline;
				}

				.score-style {
					flex: 0 0 30px;
					margin-right: 74px;
					margin-left: 5px;
				}
			}
		}
	}