已设置box-sizing:border-box但input元素仍超出div容器的问题解决求助

Let's break down why your input elements are spilling out of their .text-box-name (and similar) containers, even with box-sizing: border-box set:

Root Causes #

1. Margin on Input Elements: Your .form class adds margin: 1% 1% 1% 1% to inputs. Remember, box-sizing: border-box only accounts for padding and borders in the element's width calculation—it does not include margin. So when your input is set to width: 100%, adding horizontal margin pushes its total width beyond the parent container's bounds.
2. Conflicting Display Property: The .text-box class uses display: table-cell, which can interfere with width calculations when the parent is a flex container (like .customer-basic-info).

Step-by-Step Fixes #

1. Move Margin to Parent Containers

Instead of applying margin directly to the input, add spacing to the parent divs (.text-box-name, .text-box-email, etc.). This keeps the input's width properly constrained to the parent:

/* Remove margin from .form class */
.form {
  background-color: DarkSalmon;
  opacity: 20%;
  /* Remove this line: margin: 1% 1% 1% 1%; */
}

/* Add padding to parent containers for spacing */
.text-box-name, .text-box-email, .text-box-address, .text-box-postcode, .text-box-city, .text-box-country {
  background-color: PaleGreen;
  border-style: solid;
  border-width: 1px;
  border-color: OrangeRed;
  margin:auto;
  text-align: center;
  padding: 1%; /* Add this to create space inside the parent */
}

2. Remove Conflicting Display Property

Get rid of display: table-cell from the .text-box class—since the parent containers are using flex layout, a block-level input works better:

.text-box {
  border-style:solid;
  border-width: 2px;
  border-color: Gray;
  padding: 6px 12px;
  border-radius: 10px;
  /* Remove this line: display:table-cell; */
  width:100%;
}

3. Clean Up Redundant Width Rule

You already set width:100% on .text-box, so the .customer-info input rule is redundant and can be removed to avoid confusion:

/* Remove this entire rule */
.customer-info input {
  width: 100%;
}

Verification #

After making these changes, your inputs should fit perfectly inside their parent containers. The box-sizing: border-box will handle the input's padding and border, while the parent containers handle spacing via padding (instead of input margin), keeping everything aligned.

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