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

Html – two flex row container's items are set to width 90% and 10% but are wrapping

I want the input box and the send button box to be beside each other in the flex row, with the input taking 90% of the width. However, the send button is wrapping under the input and I’m not sure why.

.chatFooter { /* footer */
  width: 100%;

  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;

  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  border: 1px solid red;
}
.chatInput {
  border: 1px solid black;
  height: 100%;
  width: 90%;
  outline: none;
  resize: none;
  font-size: 1em;
  font-family: inherit;
  background-color: white;
}
.chatSendBtn {
  border: 1px solid black;
  height: 100%;
  width: 10%;
  font-size: 1.3em;
  background-color: white;
  color: black;
  cursor: pointer;
}
.chatSendBtn:hover {
  color: red;
}
<div class="chatFooter">
  <textarea
     class="chatInput"
     placeholder="Enter message"
  ></textarea>

  <div class="chatSendBtn">
    Send
  </div>
</div>
Tags:

3

Answers


  1. 0

    That problem happens to me too. Just make it smaller?

    Login or Signup to reply.
  2. 0

    It’s because of the way the standard CSS box model works. In the standard CSS box model, padding and borders are not included in the set dimensions. They are added to the set values, which increases the total size of the element. You have set borders around the elements which are being added to the set widths (i.e 90% and 10%) which make them bigger than the container and cause them to wrap.

    Here

    By default in the CSS box model, the width and height you assign to an
    element is applied only to the element’s content box. If the element
    has any border or padding, this is then added to the width and height
    to arrive at the size of the box that’s rendered on the screen.

    To solve it, add box-sizing: border-box; to the elements. When you add and set box-sizing to border-box, the width and height properties include the content, padding, and border. More- box-sizing.

    .chatFooter { /* footer */
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;

  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  border: 1px solid red;
}
.chatInput {
box-sizing: border-box;
  border: 1px solid black;
  height: 100%;
  width: 90%;
  outline: none;
  resize: none;
  font-size: 1em;
  font-family: inherit;
  background-color: white;
}
.chatSendBtn {
box-sizing: border-box;
  border: 1px solid black;
  height: 100%;
  width: 10%;
  font-size: 1.3em;
  background-color: white;
  color: black;
  cursor: pointer;
}
.chatSendBtn:hover {
  color: red;
}
    <div class="chatFooter">
  <textarea
     class="chatInput"
     placeholder="Enter message"
  ></textarea>

  <div class="chatSendBtn">
    Send
  </div>
</div>
    Login or Signup to reply.
  3. 0

    Remove the width values and stop trying to control all the pixels. Since you’re using flex, it is easiest to let the system do the fraction math for you. The sum of the flex units is calculated across the children of a parent that employs display: flex; In this case, 9+1=10, so give 9/10th of the space to the input and 1/10th of the space to the button as follows:

    .chatInput {
  flex: 9;  /* instead of width: 90%; */
}
.chatSendBtn {
  flex: 1;  /* instead of width: 10%; */
}

    In this system, you don’t have to finesse the box model. You can freely apply margin padding and border and your flex units will naturally apply to the elements.

    You might want to center them vertically in the parent container for aesthetics.

    .chatFooter {
  align-items: center;  /* or maybe try top, depends how you like it */
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search