Установите прокручиваемый div над другим div в 1 контейнере

Question

Я работаю над панелью обмена сообщениями в реакции, и мне нужно сделать область с сообщениями прокручиваемой, но только когда сообщения достигают нижней части div.

У меня есть контейнер div с 2 div внутри него: сообщения div (темно-синий) и div области чата (голубой).

Единственная проблема заключается в том, что высота области чата может изменяться при вставке новой строки. В качестве временного решения я использовал свойство maxHeight, равное 70%.

, вот код (удалены ненужные части):

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

Вы можете использовать grid для автоматического распределения высоты, когда один элемент имеет overflow: scroll.

PO C:

.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>