将可滚动的 div 放在 1 个容器中的另一个 div 上方

Question

我正在处理消息仪表板的反应，我需要使带有消息的区域可滚动，但仅当消息到达 div 的底部时。

我有一个容器 div，里面有 2 个 div：消息 div（深蓝色）和聊天区 div（浅蓝色）。

唯一的问题是插入新行时聊天区域的高度会发生变化。 作为临时解决方案，我使用了 70% 的 maxHeight 属性。

这是代码（删除了不必要的部分）：

const styles = (theme) => ({
  container: {
    height: '100%',
    boxShadow: theme.shadows[1],
  },
  conversation: {
    height: 'auto',
    maxHeight: '70%',
    overflow: 'auto',
    backgroundColor: 'blue',
    padding: '5% 6% 10% 6%',
  },
  chatInput: {}
});


class ChatArea extends React.Component {

  componentDidMount() {
    const { chatId, fetchMessages } = this.props;
    fetchMessages({ chatId });
  }

  componentDidUpdate(prevProps) {
    const { fetchMessages, chatId } = this.props;
    if (prevProps.chatId !== chatId) {
      fetchMessages({ chatId });
    }
  }

  render() {
    const {
      messages, classes, hotel_obj,
    } = this.props;

    return (
      <Grid id="chat-area" container direction="column" justify="space-between" alignItems="strech" className={classes.container}>
        <Grid item className={classes.conversation}>
            <List>
              {
                messages.map((message) => (
                  <Message
                    hotel_obj={hotel_obj}
                    message={message}
                  />
                ))
              }
            </List>
        </Grid>
        <Grid id="chat-id" item className={classes.chatInput}>
          <ChatInput />
        </Grid>
      </Grid>
    );
  }
}

有没有办法maxHeight 属性完全适合聊天输入区域未占用的区域？

编辑： 它必须与 IE 兼容 :(

Answer 1

当一个元素与overflow: scroll一起时，您可以使用grid自动扩展高度。

一个 POC：

.container {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto;
  border: solid;
  height: 150px;
}

.a {
  overflow: scroll;
}

.a,
.b {
  border: solid 1px;
  padding: 10px;
}

<div class="container">
  <div class="a">text<br>text<br>text<br> text<br>text<br>text<br>text<br></div>
  <div class="b">text<br>text</div>

</div>