Html Question posted in
Some basic documentation can be found here.

Html – Why are my flex items overlapping with nested input and button

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>
Tags:

2

Answers


  1. 0

    The issue with your layout seems to stem from a misunderstanding of how the flex property and width percentages work together in a flex container. When you set flex: 1 on .chatInput and flex: 0 on .chatSendBtn, you’re effectively telling the browser to allocate all available space to .chatInput and none to .chatSendBtn, which isn’t consistent with the percentage widths you’ve defined.

    To achieve the desired layout where .chatInput takes up 90% of the space and .chatSendBtn takes up 10%, you don’t need to set explicit widths on these elements. Instead, use the flex property to control their sizes relative to each other. Here’s how you can adjust your CSS:

    .chatInput {
 flex: 9; /* Takes up 90% of the space */
 height: 100%;
 font-size: 1em;
 }

.chatSendBtn {
  flex: 1; /* Takes up 10% of the space */
  height: 100%;
  font-size: 1.3em;
  color: black;
 cursor: pointer;
 }
    Login or Signup to reply.
  2. 0

    I advise you to always start your css code with

    * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

    * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search