解决Div内部元素超出容器定位的前端布局问题

父级div容器高度设为30px，内部包含2个按钮和1个文本输入框（文件输入框已隐藏），所有可见元素高度均设为100%，但元素位置超出了父div的宽高范围，显示效果不符合预期。

原代码 #

CSS #

.container {
  width: 60vw;
  max-width: 500px;
  height: 30px;
  display: table-row;
  margin-top: 10px;
  display: table-cell;
  vertical-align: middle;
  font-family: "martian-mono-variable", sans-serif;
}

.ersatzButton {
  border: none;
  outline: none;
  background-color: #e7c786;
  height: 100%;
  width: 30px;
}

.textBox {
  width: calc(100% - 90px);
  height: 100%;
  background-color: #fff;
  border: none;
  font-size: 12px;
  line-height: 30px;
  font-family: inherit;
  text-indent: 5px;
}

.fileInput {
  display: none;
}

.sendButton {
  border: none;
  outline: none;
  background-color: #e7c786;
  height: 100%;
  width: 30px;
  position: relative;
}

HTML #

<link rel="stylesheet" href="https://use.typekit.net/waj8csr.css">
<div class="container">
  <input type="file" class="fileInput" id="fileInput">
  
  <button class="ersatzButton" onclick="document.getElementById('fileInput').click();">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-plus" viewBox="0 0 16 16">
      <path d="M8 6.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V11a.5.5 0 0 1-1 0V9.5H6a.5.5 0 0 1 0-1h1.5V7a.5.5 0 0 1 .5-.5z" />
      <path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z" />
    </svg>
  </button>
  
  <input type="text" class="textBox" placeholder="type here...">
  <button class="sendButton"></button>
</div>

问题根源 #

1. 容器重复设置display: table-row和display: table-cell，后者覆盖前者，但table-cell布局不适合这种横向排列的组件，导致布局逻辑混乱。
2. 按钮、输入框默认是inline-block元素，元素间存在默认空白间隙，导致总宽度超出容器。
3. 未设置box-sizing: border-box，虽然当前无边框，但行高、内边距可能间接导致高度溢出，且后续样式调整容易出问题。
4. 手动计算输入框宽度calc(100% - 90px)误差大，未考虑元素间隙，导致宽度溢出。

修复方案 #

调整布局方式，统一盒模型，消除默认间隙：

/* 全局统一盒模型，确保元素尺寸包含内边距和边框 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  width: 60vw;
  max-width: 500px;
  height: 30px;
  /* 使用flex布局，子元素自动横向排列，高度对齐容器 */
  display: flex;
  margin-top: 10px;
  font-family: "martian-mono-variable", sans-serif;
}

.ersatzButton {
  border: none;
  outline: none;
  background-color: #e7c786;
  height: 100%;
  width: 30px;
  padding: 0;
}

.textBox {
  /* flex:1 让输入框自动填充剩余空间，无需手动计算宽度 */
  flex: 1;
  height: 100%;
  background-color: #fff;
  border: none;
  font-size: 12px;
  line-height: 30px;
  font-family: inherit;
  text-indent: 5px;
  padding: 0;
}

.fileInput {
  display: none;
}

.sendButton {
  border: none;
  outline: none;
  background-color: #e7c786;
  height: 100%;
  width: 30px;
  padding: 0;
}

关键修改说明 #

• 全局设置box-sizing: border-box，彻底避免元素因内边距、边框导致的尺寸溢出。
• 容器改用flex布局，天然适配横向排列的组件，子元素默认高度对齐容器，无需额外调整。
• 输入框使用flex:1自动填充剩余空间，解决手动计算宽度的误差问题。
• 清除按钮和输入框的默认内外边距，消除inline-block带来的空白间隙。

内容的提问来源于stack exchange，提问作者Minh Tri