CSS dynamic textarea height on load-CodePudding

I got a CSS problem, regarding the container or/and textarea height. The generated divs and textareas should dynamically set the height. Unfortunately this does not worked out like I expected. How can I change the CSS, so the appended textarea would exactly huge enough to fit the content. I do not want a overflow scrollbar.

https://jsfiddle.net/j4s81hpa/

data = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ips um has been the industry's standard dummy text ever since the 1500s, when an unknown                printer took a galley of type and scrambled it to make a type specimen book." 

$("#flow-desc").html("")
            for (var i = 0; i < 4; i  ) {
          $("#flow-desc").append('<div  id='  i  '><textarea  placeholder="#Notiz">'  data  '</textarea></div>')               
      }

    .flow-div {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 33.33%;
        background: whitesmoke;
        opacity: 1;
    }

    .wrapper {
        position: relative;
        margin: 20px;
        height: fit-content;
        background: white;
        border-radius: 10px;
        box-shadow: -10px -10px 10px rgba(255, 255, 255, 0.5),
            15px 15px 15px rgba(70, 70, 70, 0.12);
        padding: 10px;
        overflow-y: auto;
    }

    .notes-container {
        position: relative;
        margin: 20px;
        height: fit-content;
    }

    .notes-textfield {
        position: relative;
        border-radius: 10px;
        padding: 10px 10px 0 10px;
        border: none;
        resize: none;
        overflow: hidden;
        height: fit-content;
        border-bottom: 2px solid rgb(0, 50, 115, 0.25);
        width: calc(100% - 20px);
    }

    #flow-desc {
        
    }

<html>

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

<body>
    <div >
        <div >
                <div id="flow-desc">
                    <!-- 
                        .. filled by script .. 
                    -->
                </div>
        </div>
    </div>

</body>

</html>

CodePudding user response：

you can add this code js:

 data =
        "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ips um has been the industry's standard dummy text ever since the 1500s, when an unknown                printer took a galley of type and scrambled it to make a type specimen book.";

      $("#flow-desc").html("");
      for (var i = 0; i < 4; i  ) {
        $("#flow-desc").append(
          '<div  id='  
            i  
            '><textarea  placeholder="#Notiz">'  
            data  
            "</textarea></div>"
        );
      }

      $("textarea")
        .each(function () {
          this.setAttribute(
            "style",
            "height:"   this.scrollHeight   "px;overflow-y:hidden;"
          );
        })
        .on("input", function () {
          this.style.height = "auto";
          this.style.height = this.scrollHeight   "px";
        });

.flow-div {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 33.33%;
  background: whitesmoke;
  opacity: 1;
}

.wrapper {
  position: relative;
  margin: 20px;
  height: fit-content;
  background: white;
  border-radius: 10px;
  box-shadow: -10px -10px 10px rgba(255, 255, 255, 0.5),
    15px 15px 15px rgba(70, 70, 70, 0.12);
  padding: 10px;
  overflow-y: auto;
}

.notes-container {
  position: relative;
  margin: 20px;
  height: fit-content;
}

.notes-textfield {
  position: relative;
  border-radius: 10px;
  padding: 10px 10px 0 10px;
  border: none;
  resize: none;
  overflow: hidden;
  height: fit-content;
  border-bottom: 2px solid rgb(0, 50, 115, 0.25);
  width: calc(100% - 20px);
}

#flow-desc {
}

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>

    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
      integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2 xf0Uwh9KtT"
      crossorigin="anonymous"
    ></script>

    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"
    ></script>
</head>

  <style></style>

  <body>
    <div >
      <div >
        <div id="flow-desc">
          <!-- 
                      .. filled by script .. 
                  -->
        </div>
      </div>
    </div>

  </body>
</html>