我需要你的帮助。
似乎我的孩子 div（文本区域和文本）超出了边界：
这是期望的结果：
这是 HTML/CSS：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#one {
width: 800px;
border: 1px solid red;
}
#two {
text-align: right;
}
#three {
}
#field {
width: 100%;
}
</style>
</head>
<body>
<div id="one">
<div id="two">text to the right</div>
<div id="three"><textarea id="field"></textarea>
</div>
</body>
</html>
textarea是你的问题。这两种选择都与 textarea 的 CSS 有关。正如您从下面的代码中看到的那样，我还添加了相对定位#one，只是为了确保它可以在您的页面上下文中工作，因此 textarea 的宽度实际上将由该容器调整大小。
设置正确box-sizing，以便包括边框和填充（JSFiddle）：
#one {
width: 800px;
border: 1px solid red;
position: relative;
}
#two {
text-align: right;
}
#three {
}
#field {
width: 100%;
box-sizing: border-box;
/* let's also add these for cross-browser safety */
border-width: 1px;
padding: 2px;
}
设置width为小于 100% ( JSFiddle )
#one {
width: 800px;
border: 1px solid red;
}
#two {
text-align: right;
}
#three {
}
#field {
/* (1px border + 2px padding) × 2 for left and right side */
width: calc(100% - 6px);
}
边框和填充被添加到宽度上。 因为您的宽度是 100%，所以它会在字段上添加填充和边框。
因此，如果宽度为“一”的 120 像素，它会为边框添加 2 像素，为填充添加几个像素。
如果你从“三”中减去一些空间，你就可以做到这一点。
#three {
width:794px;
}
以下内容也应该适用于大多数浏览器。
#field {
width: 100%;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
}
否则，您可以从 textarea 中删除边框和填充。老实说，有很多方法可以做到这一点。
经典的盒子模型将宽度与边距、填充和边框相加。
在这种情况下，将您的 textarea 设置为另一种计算宽度的方式，即 box-sizing 为 border-box （宽度是适当的宽度，没有边距、填充和边框）
#field {
width: 100%;
-webkit-box-sizing:border-box;
}
（您可以添加所需的前缀、-moz、-ms、-o...）
您width: 100%为#fieldtextarea 设置。border默认情况下， textarea 也有和的非零值padding。所以毕竟你的 textarea 是800px宽（继承自.three） + 4px边框 + 2px边框 = 806px一起（但它可能会略有不同，具体取决于您使用的浏览器）。为此
修改 CSS#field
#field {
width: 100%;
margin: 0;
padding: 0;
border: 0;
}
我还设置margin: 0只是为了确保某些浏览器不会将其设置为非零值。
它超越边界的原因是，它正在border:2px;