javascript - 当元素碰到另一个元素的固定宽度时，阻止该元素扩展其宽度

我有一个div，随着用户键入文本区域而扩展，该文本区域将其文本复制到div中。我希望该div在碰到另一个div的外边缘（即其祖父母）的外部边缘时停止扩展其宽度，但是我在网上找不到解决方法。当前，当div击中外边缘时，它仅将自身移动到下面的下一行，直到它是该行上的唯一元素（我不希望这样做）。我希望它的高度向下扩展。

See this jsfiddle完全符合我的意思，然后输入第一个文本区域

我也不想对任何像素值（例如max-width: 16px;或其他）进行硬编码。我想让此动态足够动态，以使div可以扩展到多少空间都可以使用。

 function copyText(callingName, receivingName){
      var significantDiv = $('[name=' + callingName +']');
      var significantSpan = $("#" + receivingName);
      significantSpan.text(significantDiv.val());
    }//end copyText()

body{
	background-color: rgb(90, 90, 96);
	font-family: "Lucida Sans Unicode";
  font-weight:bold;
  font-size:30px
}

input[type=text]{
	border-radius:30px;
	background-color:rgb(128, 128, 137);
	border-style:none;
	padding:15px;
	outline:none;
	margin-bottom:10px;
	vertical-align: middle;
}

input[type=text]:focus{
	background-color:rgb(149, 149, 160);
}

div.addP{
	float:left;
	min-width:50%;
	max-width:50%;
}

.textAreaColumn{
	display:inline-block;
	vertical-align: top;
	outline: solid 1px lime;
}

#someText0Span{
	display: inline-block;

	outline: solid 1px orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="addP" style= "outline:solid 1px blue;">space</div>
  <div class="addP" style="outline:solid 1px red"><!--Everything in this div is in the right column of info.-->
    <div class="inputRow">
      Type some text:
      <div class="textAreaColumn" id="someTextColumn">
        <div class="singleTextAreaContainer">
          <input type="text" name="someText0" onkeyup="copyText('someText0','someText0Span')">
        </div>
      </div>
    </div>
    <div class="inputRow">
      Some text:
      <div class="textAreaColumn" id="moreTextColumn">
        <div class="singleTextAreaContainer">
          <input type="text" name="moreText0"> <div id="someText0Span"></div>
        </div>
      </div>
    </div>
  </div>

最佳答案

由于您使用选择器的方式，我的代码有点难以理解，因此我从头开始，但是您应该能够在自己的代码中使用下面的操作

function copyText(callingName, receivingName){
      var significantDiv = $('[name=' + callingName +']');
      var significantSpan = $("#" + receivingName);
      significantSpan.text(significantDiv.val());
    }

body {
  padding: 20px
}

input {
  padding: 10px 15px;
  border: 2px solid;
}

input:focus {
  outline: none;
 }

[name] {
  margin-bottom: 20px;

 }

.container {
  width: 300px;
  border: 3px solid;
  margin: 20px auto;
  padding: 20px 10px;
  overflow: auto;
}


/*Code that you should pay attention to is below*/

input {
  float: left;

}

span {
  display: block;
  overflow: auto; /*turn element to block formatting context*/
  word-wrap: break-word;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name='input'

onkeyup="copyText('input','output')">

<div class="container">
  <input type="text">
  <span id='output'></span>
</div>

这种工作方式是将输入浮动到左侧以使其脱离正常流，然后将输出范围变成一个块。通常，在浮动之前位于其下方的块元素将忽略该浮动元素，与它们位于同一行并在其下方滑动。

但是，随着跨度，我添加了一个属性：

overflow: auto;

这变成了block formatting context，这些元素的特征之一是它们尊重旁边的浮动元素的宽度，并且会紧挨着它们，占据浮动，增长和随着浮动大小的变化而动态缩小。

最后，我添加了：

word-wrap: break-word;

到span的位置，以使长字跨多行。

请注意，使用浮动元素时，如果没有其他元素比容器中的浮动元素大，则父元素的高度将折叠。您可以使用clearfix解决方案来解决此问题