使用 flex-box 调整大小的 div

Posted 2023-03-05

【中文标题】使用 flex-box 调整大小的 div

【英文标题】：Resizable divs using flex-box

【发布时间】：2021-06-16 17:27:37

【问题描述】：

我有一个页面，里面有 3 个 divs，其中 2 个应该可以调整大小。所有这些都可以向左/向右移动，并且可以最大化/最小化。

这是Stackblitz。

问题在于，有时调整大小会导致显示滚动条，例如，调整第一个框的大小并将其处理程序拖动到屏幕的右端。

有没有办法通过 flex box 或 css grid 实现相同的目标？可能会根据鼠标移动增加或减少flexGrow？这有意义吗？

【问题讨论】：

不确定这是一个好的解决方案，但尝试添加到正文溢出：隐藏。一般来说，看看这种解决方案。在您的示例中，它解决了该问题。但请检查它是否会影响您网站上的任何其他页面

@DmitriySakhno 此处溢出无济于事

【参考方案1】：

您是否尝试重置默认边距和内边距？

html,
body 
  height: 100%;
  padding: 0;
  margin: 0;