Javascript 阻止一个元素在碰到另一个元素时扩展其宽度’；s固定宽度

我有一个div，它会随着用户键入文本区域而扩展，文本区域会将其文本复制到div中。我希望该div在到达另一个div（其祖辈）的外边缘时停止扩展其宽度，但我在网上找不到解决方法。当前，当div到达外部边缘时，它只会将自身移动到下面的下一行，直到它成为该行上的唯一元素（我不想要）。我想把它的高度向下扩展

准确地理解我的意思，并输入第一个文本区域

我也不想硬编码任何像素值（如

最大宽度：16px；

或其他）。我想让它足够动态，无论div有多少可用空间可以扩展，它都可以工作

函数copyText（callingName、receivingName）{
var significtdiv=$（'[name='+callingName+']'）；
var有效跨度=$（“#”+接收名称）；
signitintspan.text（signitintdiv.val（））；
}//结束copyText（）

正文{
背景色：rgb（90,90,96）；
字体系列：“Lucida Sans Unicode”；
字体大小：粗体；
字体大小：30px
}
输入[类型=文本]{
边界半径：30px；
背景色：rgb（128128137）；
边框样式：无；
填充：15px；
大纲：无；
边缘底部：10px；
垂直对齐：中间对齐；
}
输入[类型=文本]：焦点{
背景色：rgb（149149160）；
}
div.addP{
浮动：左；
最小宽度：50%；
最大宽度：50%；
}
.textarea列{
显示：内联块；
垂直对齐：顶部；
外形：固体1px石灰；
}
#someText0Span{
显示：内联块；
外形：固体1倍橙色；
}

空间
键入一些文本：
一些文本：

函数copyText（callingName、receivingName）{
var significtdiv=$（'[name='+callingName+']'）；
var有效跨度=$（“#”+接收名称）；
signitintspan.text（signitintdiv.val（））；
}//结束copyText（）

正文{
背景色：rgb（90,90,96）；
字体系列：“Lucida Sans Unicode”；
字体大小：粗体；
字体大小：30px
}
输入[类型=文本]{
边界半径：30px；
背景色：rgb（128128137）；
边框样式：无；
填充：15px；
大纲：无；
边缘底部：10px；
垂直对齐：中间对齐；
}
输入[类型=文本]：焦点{
背景色：rgb（149149160）；
}
div.addP{
浮动：左；
最小宽度：50%；
最大宽度：50%；
}
.textarea列{
显示：内联块；
垂直对齐：顶部；
外形：固体1px石灰；
}
#someText0Span{
显示：内联块；
外形：固体1倍橙色；
}

空间
键入一些文本：
一些文本：

由于您使用选择器的方式，您的代码对我来说有点难以理解，因此我一开始只是白纸黑字，但您应该能够在自己的代码中使用我在下面所做的

函数copyText（callingName、receivingName）{
var significtdiv=$（'[name='+callingName+']'）；
var有效跨度=$（“#”+接收名称）；
signitintspan.text（signitintdiv.val（））；
}

正文{
填充：20px
}
输入{
填充：10px 15px；
边框：2倍实心；
}
输入：焦点{
大纲：无；
}
[姓名]{
边缘底部：20px；
}
.集装箱{
宽度：300px；
边框：3倍实心；
保证金：20px自动；
填充：20px 10px；
溢出：自动；
}
/*下面是您应该注意的代码*/
输入{
浮动：左；
}
跨度{
显示：块；
溢出：自动；/*将元素转换为块格式上下文*/
单词包装：打断单词；
}

请将代码添加到JSFIDLE中，而不是添加到JSFIDLE中。寻求调试帮助的问题必须包含在问题本身中重现代码所需的最短代码。注意-请不要滥用代码块来规避此要求。上面有一个红色的通知，大意是……你错过了吗？