我有一个div 里面分为 左 和右 已经设置弹性盒 并且距离 上下20px 左右16px 然后 右边div lim分为上下两个盒子 设置弹性盒 上盒子 有三个div分别水平排列 左边 中间 右边 下盒子 也有两个地v 但是下面盒子div随着内容扩展宽度 导致 上盒子 右边的元素被挤出去了 如何使下盒子内容变化 不影响上盒子元素布局

您可以尝试使用CSS中的flex-shrink属性来解决这个问题。flex-shrink属性控制元素在空间不足的情况下缩小的程度。默认情况下，flex-shrink的值为1，即当空间不足时，元素会等比例缩小。如果您希望下面盒子的内容变化不影响上面盒子元素的布局，可以将下面盒子的flex-shrink属性设置为0，这样在空间不足时，下面盒子的元素不会缩小，而是会溢出父容器。而上面盒子的元素则会自适应空间，不会被挤出去。

示例代码：

<div class="wrapper">
  <div class="left"></div>
  <div class="right">
    <div class="top">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="bottom">
      <div class="left"></div>
      <div class="right"></div>
    </div>
  </div>
</div>

.wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 16px;
}

.left {
  width: 100px;
  height: 100px;
}

.right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
  margin-left: 16px;
}

.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bottom > *:not(:last-child) {
  margin-right: 16px;
}

.bottom > * {
  flex-shrink: 0;
}

.left, .middle, .right {
  width: 100px;
  height: 50px;
}

在上述代码中，我们将下面盒子的子元素的flex-shrink属性设置为0，这样它们就不会缩小。同时，我们设置了`.bottom > *:not(:last-child)`的margin-right属性，这样下面盒子的子元素之间就会有一定的间距。