在元素调整大小时，也调整兄弟元素的大小

【问题标题】：On element resize, resize the sibling elements too在元素调整大小时，也调整兄弟元素的大小
【发布时间】：2021-02-26 10:42:04
【问题描述】：

我正在尝试使用 css 属性 resize: 水平调整一个 div 的大小。这个 div 右侧还有其他元素，其填充为 10px，无论何时调整大小，都需要跟随可调整大小的 div。我不确定调整大小的最佳方法是什么？我找到了一些关于 DOM 监控的文章，但想知道是否有“更简单”的方法来做到这一点。

【问题讨论】：

在不知道如何调整元素大小的情况下，我建议您使用CSS variables。
你能给我们一个你当前代码的最小工作示例吗？这样我们可以更好地了解您当前的问题
JavaScript 是您的解决方案，我害怕：请参阅：stackoverflow.com/q/46931103/383904

标签： javascript html jquery css

【解决方案1】：

您可以使用display: flex 将元素包装在容器中。如果您告诉不可调整大小的元素占用剩余空间，它们应该自动与之前调整大小的元素一起流动。

这是一个可运行的示例：

.container {
  display: flex;
}

.non-resizable {
  flex-grow: 1;
  background: pink;
}


.resizable {
  resize: horizontal;
  overflow: auto;
  border: 1px solid black;
  margin-right: 12px;
}

<div class="container">
  <div class="resizable">Hello</div>
  <div class="non-resizable">world!</div>
</div>

【讨论】：