What I am trying to do: Create item within my wrapper

What is actually happening: Created item can go beyond my wrapper

This is my wrapper code

 <div className="DetailLocationContainer">
       
 </div>

my css

.DetailLocationContainer {
  background-color: red;
  width: 100px;
  height: 300px;
  /* margin: 2% auto auto auto; */
  background-image: repeating-linear-gradient(#ccc 0 1px, transparent 1px 100%),
    repeating-linear-gradient(90deg, #ccc 0 1px, transparent 1px 100%);
  background-size: 50px 50px;
}

This is my create item code

 createElement(el) {
    const i = el.add ? "+" : el.i;
    var test = document.getElementById("hello");
    if (test != null) {
      //  test.getAttribute("style")

      var testing = test.style.transform.replace(/[\(\)]/g, "").split(",")[1];
      console.log("testing ", testing);

      if (testing === "300px") {
        alert("it works");
      }
    }
    return <div key={i} data-grid={el} id="hello"></div>;
  }

even when the created element exceed the height of my wrapper, it did not enter my if condition

This is my codesandbox