CSS聊天框是一種常見的UI設計，可以通過CSS的樣式來實現不同風格的聊天對話框。在實現聊天框時，我們可能會遇到一種問題：對話框不同長度的內容需要自適應高度。

為了解決這個問題，我們可以使用CSS的Flex布局來自適應高度。具體實現方式如下：

.chat-container {
display: flex;
flex-direction: column;
}
.chat-item {
display: flex;
flex-direction: row;
align-items: flex-end;
}
.chat-item .message {
padding: 10px;
border-radius: 10px;
max-width: 70%;
word-break: break-all;
background-color: #ccc;
font-size: 14px;
}

上述代碼中，“.chat-container”是聊天界面的總容器，“.chat-item”是每條聊天內容的容器，“.message”是聊天框內容的容器。

其中，“.chat-container”使用Flex布局，并設置Flex方向為“column”，實現了聊天框自適應高度的效果。而每條聊天內容的容器“.chat-item”使用Flex布局，并設置子元素垂直對齊到末端“align-items: flex-end”，實現了上下對齊的效果。

在聊天框內容的容器“.message”中，我們設置了最大寬度“max-width: 70%”和“word-break: break-all”，這樣可以讓聊天框根據內容自適應寬度和高度，同時還可以支持長文字折行顯示。

綜上所述，使用CSS的Flex布局和給容器設置最大寬度和文本換行屬性可以實現聊天框自適應高度，使聊天界面更加美觀和實用。