如何根据上述输入的宽度限制.form-text的宽度？
我想在Bootstrap应用程序中使用.form-text布局一个<input>以获取更多信息.<input>和.form-text是网格布局的一部分(跨越多列).显示在.form-text样式<div>内部的文本是动态变化的，这可以根据其大小扩展网格的列.
这个例子(https://getbootstrap.com/docs/5.3/forms/overview/#overview)
<form class='ref-table'>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else. We'll never share your email with anyone else. We'll never share your email with anyone else.</div>
</div>
</form>
我注意到.form-text和<input>都保持在相同的宽度.当我将style='width: auto'加到<input>上时，表单文本跨越了输入之外，但理想情况下，文本应该绕在输入下面(使用输入的宽度作为其宽度).
Update
这里有一个实际的例子(我意识到很难描述或再现这个问题).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="src/style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<style>
body {
background: #6e28d9;
padding: 0 24px;
color: white;
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.grid {
display: grid;
grid-template-columns: 2rem max-content max-content min-content minmax(2rem, min-content) min-content auto;
gap: 1rem;
overflow-x: hidden;
}
.grid-span {
grid-column: 4 / span 4;
overflow: hidden;
}
</style>
</head>
<body>
<div class='grid'>
<div style='background-color: green'>1</div>
<div style='background-color: blue'>2</div>
<div style='background-color: yellow'>3</div>
<div style='background-color: cyan'>4</div>
<div style='background-color: pink'>5</div>
<div style='background-color: orange'>6</div>
<div style='background-color: purple'>7</div>
<div class='grid-span' style='background-color: fuchsia'>
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" style='width: auto'>
<div id="emailHelp" class="form-text">We'll never share your email with anyone else. We'll never share your email with anyone else. We'll never share your email with anyone else.</div>
</div>
</form>
</div>
</div>
</body>
</html>
我希望文本在我画黑线的地方被打破，所以它不会不必要地扩展上面的列(即"7")，这会在表单文本动态变化时对该列中的元素进行一些尴尬的重新定位.
