Javascript 相互调整大小的堆叠div

这可能会是一个漫长的过程： 我正在尝试用Electron、React和Socket.io制作一个聊天应用程序（类似于Slack）。我的问题主要是关于React和CSS/Sass。现在我已经有了一些引导，但我根本没有真正使用网格系统，所以可以/可能会被废弃

页面的结构如下：我有一个页脚和一个可调整大小的文本区域。在它上面我有一个div用来保存信息。该div将overflow-y设置为scroll，这样滚动条只用于消息，而不占用整个页面的空间。我希望div随着页脚随着textarea的增长而变短。现在，尽管div只是扩展到页脚下（以及滚动条）。由于消息填充了div，所以没有滚动条，滚动条中也没有拇指（我认为这是正确的术语）

React组件（为了简洁起见，我只包含了一个li，但在我的代码中有一堆li）：

---

我已经尝试了很多不同的方法来实现这个目标。我尝试了几个节点模块。我尝试添加事件侦听器，方法是在添加事件侦听器时将

ref='footer'

添加到页脚并将其引用为

this.refs.footer

，同时提供页脚和id并使用

document.getElementById（'footer'）

。无论我尝试什么，我都无法在footerResize中获得有关页脚大小的任何信息。在此方面的任何帮助都将不胜感激。我甚至不知道这是否是我应该用sass属性做的事情，或者我是否需要js/React来做这件事。

您可以尝试基于flexbox的布局

这适用于

。容器流体

display: flex;
flex-direction: column;

这适用于

。消息

flex: 1;

然后从

footer

其作用：它设置

.messages

的高度以填充其父级的剩余空间。因此，当

页脚

变大时，剩余空间会变小，

。消息

会缩小

---

请注意，您需要为flexbox添加供应商前缀，具体取决于您的目标浏览器支持。

谢谢，我会研究一下，看看它是否有效。

display: flex;
flex-direction: column;

flex: 1;