Created
August 11, 2023 00:31
-
-
Save RomneyDa/b797231f092eb19b809aed0a0ffdc7d6 to your computer and use it in GitHub Desktop.
HTML/CSS for flexbox chat with editor at the bottom and proper scrolling
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Home</title> | |
| <link href="/styles.css" rel="stylesheet" type="text/css"> | |
| </head> | |
| <body> | |
| <div class="main-tab"> | |
| <div class="main-col"> | |
| <h2>Chats</h2> | |
| <div class="chat-row"> | |
| <p>chat 1</p> | |
| <p>chat 2</p> | |
| <p>chat 3</p> | |
| <p>chat 4</p> | |
| <p>chat 5</p> | |
| <p>chat 6</p> | |
| <p>chat 7</p> | |
| <p>chat 8</p> | |
| <p>chat 9</p> | |
| <p>chat 10</p> | |
| <p>chat 11</p> | |
| <p>chat 12</p> | |
| </div> | |
| <div class="edit-row"> | |
| <h2>Editor</h2> | |
| <textarea name="text" oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'></textarea> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| padding: 0; | |
| margin: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| display: flex; | |
| background-color: gray; | |
| justify-content: center; | |
| padding-top: 50px; | |
| padding-bottom: 30px; | |
| max-height: 100vh; | |
| overflow: auto; | |
| } | |
| .main-tab { | |
| display: flex; | |
| flex: 1; | |
| flex-direction: column; | |
| max-width: 800px; | |
| padding: 10px; | |
| background-color: blue; | |
| overflow: auto; | |
| } | |
| .main-col { | |
| display: flex; | |
| background-color: yellow; | |
| padding: 10px; | |
| overflow: auto; | |
| max-height: 100%; | |
| flex-direction: column; | |
| } | |
| .chat-row { | |
| display: flex; | |
| overflow-y: scroll; | |
| flex-direction: column-reverse; | |
| background-color: red; | |
| padding: 10px; | |
| } | |
| p { | |
| flex: 1; | |
| min-height: 70px; | |
| } | |
| .edit-row { | |
| background-color: green; | |
| padding: 10px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment