Lo que estoy tratando de hacer: crear un elemento dentro de mi contenedor
Lo que realmente está sucediendo: el elemento creado puede ir más allá de mi envoltorio
Este es mi código de envoltorio
<div className="DetailLocationContainer"> </div>mi 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; }Este es mi código de artículo creado
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>; }incluso cuando el elemento creado excedía la altura de mi envoltorio, no ingresó en mi condición if
Esta es mi caja de códigos
la solución fácil sería agregar overflow: hidden; to DetailLocationContainer Esto ocultaría el contenido desbordado, pero aun así "se desbordaría". Puede intentar leer la suma de los divs principales x coordenada y altura, para comparar con su div hijo. Pero en mi opinión, eso no resultaría en una solución más limpia.
(no estoy lo suficientemente familiarizado con reaccionar, para saber cómo obtendría acceso a su div principal en su js)