flex-grow 自适配宽度避免内容超出挤压两侧的最佳实践

问题描述

• 左右设置固定宽度， 中间通过 flex-grow 自适配填充剩余空间
• 当中间内容超长时，会挤压两侧的空间

两侧被挤压的效果

期待的正常效果

问题解析

浏览器默认为flex容器的子元素设置了 “min-width: auto;min-height: auto”，引发flex容器的子元素能被内容撑大

解决方案

将 flex容器的子元素的宽度设置为 0

width: 0px;

完整范例代码

技术要点：

• 整行 flex 布局
• 左右指定固定宽度
• 中间容器使用 flex-grow: 1; 自适应布局
• 中间容器设置 width: 0px; 将宽度完全交给 flex 分配
• 中间内容设置最小宽度 min-width: 200px; 和自动换行 word-wrap: break-word;
• 中间容器设置 overflow-x: auto; 以便在中间容器较小时，显示横向滚动条，方便滚动看内容

<template>
  <div class="page">
    <div class="left">300px宽</div>
    <hr />
    <div class="container">
      <div class="left"></div>
      <div class="middle">
        <div class="content">
          中间通过 flex-grow: 1 实现自适应布局，内容最小宽度为 200 px
          (内容超长，内容超长，内容超长，内容超长，内容超长，内容超长，内容超长，内容超长，内容超长，内容超长，内容超长，内容超长，内容超长，内容超长，内容超长，内容超长，内容超长，内容超长)
        </div>
      </div>
      <div class="right"></div>
    </div>
    <hr />
    <div class="rightExample">
      <div class="right">400px宽</div>
    </div>
  </div>
</template>

<style scoped>
.content {
  min-width: 200px;
  word-wrap: break-word;
  border: 1px solid yellow;
  margin: 20px;
}
.page {
  color: white;
}
.container {
  display: flex;
  background-color: gray;
}
.left {
  width: 300px;
  background-color: blue;
  text-align: center;
}

.middle {
  overflow-x: auto;
  flex-grow: 1;
  width: 0px;
  background-color: red;
}

.right {
  width: 400px;
  background-color: green;
  text-align: center;
}

.rightExample {
  display: flex;
  justify-content: end;
}
</style>