Block by the height of the remaining area?

Question

css

Hello. Tell me, please, the site has a header, then the sidebar goes to the left, and the main container to the right.
In the sidebar, the first block is the mini-profile, below the chat. How can I make the chat equal in height to the rest of the page?

Answer 1

.sidebar {
  display: flex;
  flex-direction: column;
}

.profile {
  // your stuff
}

.chat {
  flex: 1 0 auto;
}

Demo 1
Demo 2

Answer 2

https://codepen.io/topicstarter/pen/MQBaoB?editors=1010 - you can put as much text in item-chat as you like... for verification