From my understanding, the chatFooter should have width: 100% of its parent.The chat input should be 90% of its width and the chat send button should be 10% of it.Then the input and button inside each should take up the entire chatInput and chatSendBtn divs respectively.But I'm getting scroll bars on the container, and the widths of the button and input aren't as intended.
html { height: 100vh; width: 100vw;}body { display: flex; justify-content: center; align-items: center; flex-flow: column nowrap; min-height: 0; height: 100%; width: 100%;}.container { height: 100%; width: 100%; display: flex; flex-direction: column; flex-wrap: wrap; border: 1px solid red;}.chatFooter { /* footer */ width: 100%; display: flex; flex-flow: row nowrap; justify-content: space-evenly;}.chatInput { flex: 1; height: 100%; width: 90%; font-size: 1em;}.chatSendBtn { flex: 0; height: 100%; width: 10%; font-size: 1.3em; color: black; cursor: pointer;}<!DOCTYPE html><html><body> <div class="container"><div class="chatFooter"><div class="chatInput"><input type="text" placeholder="Enter message" value="msg" style={{height: "100%", width: "100%"}} /></div><div class="chatSendBtn"><button style={{height: "100%", width: "100%"}} > Send</button></div></div></div></body></html>