How to stop an element from expanding its width when it hits another element's limit edge?

HTML & CSS
1

Hi! I have a div that expands as the user types into a textarea that copies its text into the div. I want that div to stop expanding its width when it hits the outer edge of the other div that is its grandparent, but I have found no solutions online for how to do that. Currently when the div hits the outer edge it just moves itself to the next line below until it is the only element on the line (which I do not want). I’d like it to expand its height downwards.

See this jsfiddle for exactly what I mean and type into the first textarea:

I also don’t want to hardcode any pixel values (like max-width: 16px; or whatever). I’d like to make this dynamic enough that it works no matter how much space the div has available to expand to.

Thanks a whole bunch for the help!

2

Looks like float:right;height:auto;witdth:100% in either of the divs.

3

Sorry, that doesn’t appear to do anything to make it stop when it hits the border. What is the expected result?

928×422 85.9 KB

Thanks

4

Hi Omninano,
If I’m understanding you correctly, I think you will be able to get what you want by using flexbox.

If this screenshot is correct…

Then this code will produce it.

<!doctype html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Test Page</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
   <script>
    function copyText(callingName, receivingName){
      var significantDiv = $('[name=' + callingName +']');
      var significantSpan = $("#" + receivingName);
      significantSpan.text(significantDiv.val());
    }//end copyText()
   </script>
<style>
body {
  background-color: rgb(90, 90, 96);
  font-family: "Lucida Sans Unicode";
  font-weight: bold;
  font-size: 30px;
}
.wrap {
  display: flex;
  flex-flow: row nowrap;
}
div.addP {
  flex: 1 1 50%;
}
.inputRow {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  margin: 5px 0;
}
.textAreaColumn, .inputRow p {
  outline: 1px solid lime;
  margin: 5px;
}
.singleTextAreaContainer {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-start;
}
#someText0Span {
  outline: 1px solid orange;
  margin: 0 5px;
}
input[type=text] {
  border-radius: 30px;
  background-color: rgb(128, 128, 137);
  border-style: none;
  padding: 15px;
  outline: none;
}
input[type=text]:focus {
  background-color: rgb(149, 149, 160);
}
@media all and (max-width: 500px) {
  .wrap {
    flex-flow: column nowrap;
  }
  div.addP {
    flex: 0 0 100%;
  }
}
</style>

</head>
<body>
<div class="wrap">
  <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">
      <p>Type some text:</p>
      <div class="textAreaColumn" id="someTextColumn">
        <div class="singleTextAreaContainer">
          <input type="text" name="someText0" onkeyup="copyText('someText0','someText0Span')">
        </div>
      </div>
    </div>
    <div class="inputRow">
      <p>Some text:</p>
      <div class="textAreaColumn" id="moreTextColumn">
        <div class="singleTextAreaContainer">
          <input type="text" name="moreText0">
          <div id="someText0Span"></div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>
4 Likes
5

Hi Ray! That is (almost) exactly right! The only thing is I don’t want the div (outlined in orange) to move down to the next line when the text becomes too big. So in the example screenshot you gave, instead of having the div that wraps around the input and the orange-outlined div move down to the next line underneath “Some text:”, I would like it to stay on the same line as “Some text:” and then expand vertically.

Thanks a bunch!

1 Like
6

These changes should take care of it.

On .inputRow change the flex-flow to row nowrap and align-items to flex-start.

.inputRow {
  display: flex;
  flex-flow: row nowrap; /*change this*/
  align-items: flex-start; /*change this*/
  margin: 5px 0;
}
2 Likes
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.