How to make sure that elements in div shouldn't cross the div horizontally?

Question

We are trying to create a chatbot application. The input where user enters the text and 'send' button are inside a div. The div width is 100%. This is working good in the laptop and on all the mobiles except Iphone14 where the send button is getting cutoff. Below is the code.

.chat-container {
  background: #fff;
  height: 100%;
  overflow: hidden;
  padding: 0;
  border-right: 1px solid #d8dada;
  border-left: 1px solid #d8dada;
}

.chat-container>div:last-of-type {
  position: absolute;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  padding-right: 10px;
}

body>div>div>div:nth-child(2)>span {
  background: #dadada;
  padding: 10px;
  font-size: 21px;
  border-radius: 50%;
}

body>div>div>div.message-data-right.macro {
  margin: auto;
  margin-left: 1%;
}

.chat-header {
  background-color: #ffffff;
  height: 3.5rem;
  line-height: 3.5rem;
  color: #000000;
  border-bottom: 1px solid #000000;
  position: relative;
}

.chat-header-content {
  align-content: center;
  padding-top: 10px;
  padding-bottom: 10px;
}

.header-img {
  height: 24px;
  width: 106px;
  transform: scale(0.85);
  vertical-align: middle;
  content: url('./../images/vz_logo.svg');
}

.gray-button {
  background-color: #5b5b5b;
  border: none;
  color: white;
  padding: 10px 24px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 15px;
  font-family: Roboto-Medium;
  border-radius: 4px;
}

.chat-ul {
  width: 100%;
  list-style-type: none;
  padding: 18px 18px 3px 18px;
  position: absolute;
  bottom: 62px;
  display: flex;
  flex-direction: column;
  top: 3.5rem;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #909296 #dee0e2;
  background-color: #f6f6f6;
  margin-bottom: 0%;
  border-bottom: 1px solid #c1c1c1;
}

.entered-text {
  border-width: 1px;
  border-radius: 5px;
  padding: 10px;
  background: #f6f6f6;
  width: 100%;
  border-color: #c1c1c1;
}

.text {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.text>p:first-of-type {
  width: 100%;
  margin-top: 0;
  margin-bottom: auto;
  line-height: 13px;
  font-size: 13px;
}

.text>p {
  width: 100%;
  margin-top: 0;
  margin-bottom: auto;
  line-height: 13px;
  font-size: 13px;
}

.text>p:last-of-type {
  width: 100%;
  text-align: right;
  margin-bottom: -2px;
  margin-top: auto;
}

.text-right {
  float: right;
  font-family: Arial;
  position: relative;
}

.send-message {
  width: 100%;
  border-radius: 0px;
  padding: 10px;
  display: flex;
}

input:focus {
  outline: none;
}

button,
button:focus,
button:active {
  outline: none;
}

<div class="chat-container">
  <header class="chat-header">
    <img class="header-img" />
    <button type="button" class="icon-close" onClick="closeChatWindow()"></button>
  </header>

  <ul class="chat-ul"></ul>
  <div>
    <div class="send-message">
      <div class="text text-right">
        <input class="entered-text" />
      </div>
    </div>
    <button id="send" class="gray-button" type="button" onClick="onMessageSend()"> Send </button>
  </div>
</div>

Our testing team raised a bug saying that send button gets cutoff on IPhone14. I am not sure how to reproduce the issue as I don't have Iphone14. I have Android phone on which code is working fine. On Pc also, I tested on different browsers all are working fine. I used toggle device toolbar under developer tools to check how it looks like for different devices and used responsive to change width and height. I am not able to reproduce the issue. Below is the image where it got reproduced on Iphone14.

At the end of the image 'Send' grey color button is cutoff. Can any one please let me know how to resolve the issue.

Answer 1

You don't need an iPhone to see this. It's apparent in Chrome for me. Use the emulator in the dev tools if you like.

1. Remove the float (.text-right) from the layout
2. Take the 100% width off the input and .send-message
3. Move the flex class up a level to contain both the input and the button

I've also added some left margin to the button.

I've fixed a great many such situations in my career, and more often than not the solution involves removing unnecessary styling to simplify. You might work though your entire layout and do so.

.gray-button {
  background-color: #5b5b5b;
  border: none;
  color: white;
  padding: 10px 24px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 15px;
  font-family: Roboto-Medium;
  border-radius: 4px;
  margin-left: 10px;
}

.entered-text {
  border-width: 1px;
  border-radius: 5px;
  padding: 10px;
  background: #f6f6f6;
  border-color: #c1c1c1;
}

.text {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.send-message {
  border-radius: 0px;
  padding: 10px;
  display: flex;
}

input:focus {
  outline: none;
}

button,
button:focus,
button:active {
  outline: none;
}

<div class="chat-container">
  <div class="send-message">
      <div class="text">
        <input class="entered-text" />
      </div>
    <button id="send" class="gray-button" type="button" onClick="onMessageSend()"> Send </button>
  </div>
</div>

Answer 2

Im no expert but should you put a <br> in the div

edit: line breaks are usually unnecessary so I would say only use this temporary until you find the solution

Answer 3

The most straightforward way to solve this is to is use the CSS calc() function to give input.entered-text a flexible width which will always accommodate the width of the <button>:

e.g. If you give button#send a fixed width (width: 100px), then you can give input.entered-text a width that can accommodate that fixed width (width: calc(100% - 100px))

Example:

#send {
  display: inline-block;
  width: 100px;
  margin-left: 12px;
  box-sizing: border-box;
}

.entered-text {
  display: inline-block;
  width: calc(100% - 12px - 100px);
  box-sizing: border-box;
}