flex布局，踩坑记-宽度溢出

  页面左右布局的情况，非常常见，常用的就是 flex 布局，确实好用，下面是一种 左侧宽度固定，右侧宽度自适应的一个梨子：

dom部分

<div class="container">
  <div class="sidebar">
    <!-- 左侧侧边栏内容 -->
  </div>
  <div class="content">
    <!-- 右侧列表内容 -->
  </div>
</div>

css部分

.container {
  display: flex;
}

.sidebar {
  width: 300px;
}

.content {
  flex: 1;
}

1. 首先，将外层容器设置为flex布局，使内部的子元素能够实现自适应宽度。

2. 左侧的侧边栏设置宽度为300px，右侧的列表则使用flex: 1，这会让它自动占据剩余的空间，实现自适应宽度。

这个写法有一个问题，当右侧存在滚动条时，右侧会挤压左侧div的空间。原因是使用flex: 1属性会在右侧内容溢出时出现滚动条，从而导致右侧宽度的变化，从而影响到左侧div的空间。

解决办法

使用 calc() 计算宽度

.container {
  display: flex;
}

.sidebar {
  width: 300px;
}

.content {
  width: calc(100% - 300px);
  overflow-y: auto;
}

1. 外层容器使用flex布局，左侧的div宽度设置为300px。

2. 右侧的div设置宽度为calc(100% - 300px)，这意味着它会占据除左侧div以外的所有可用空间。calc()函数使用算术表达式计算元素的宽度。

3. 右侧div设置overflow-y: auto，以在内容溢出时出现垂直滚动条，从而防止内容撑开div并影响左侧div的宽度。

这种方法可以确保右侧div的宽度始终是剩余空间的大小，而不会受内容的溢出而变化。