Tengo varios divs y divs secundarios configurados y flexionados en una fila. Quiero que el contenido de desbordamiento del div izquierdo se trunque y se oculte a favor del contenido del div derecho cuando el elemento cambia de tamaño horizontalmente. Consulte este codepen para ver un ejemplo básico de lo que estoy tratando de hacer. Sin embargo, aunque pude hacerlo funcionar en ese bolígrafo, no funcionará de la misma manera en mi código real. Esto es lo que tengo:

 <div className={videoAssetCard}> {/* this outer div is flexed to a column */} <div className={videoAssetCard__ThumbnailContainer}> <img src={thumbnails.animatedUrl} alt={video.name} className={videoAssetCard__Thumbnail} /> </div> <div className={videoAssetCard__DetailsContainer}> {/* container flexed to row */} <div className={videoAssetCard__Details}> {/* container that should truncate */} <p className={videoAssetCard__Title}>{video.name}</p> <p className={videoAssetCard__Desc}>{video.description}</p> </div> <div className={videoAssetCard__Actions}> {/* container that should not truncate */} {actionButtons} </div> </div> </div>

 .videoAssetCard__DetailsContainer { display: flex; flex-direction: row; justify-content: space-between; align-items: center; overflow: hidden; width: 100%; } .videoAssetCard__Details { width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .videoAssetCard__Actions { display: flex; flex-direction: row; }

A pesar de que tengo los mismos valores en los selectores correspondientes en mi código, cuando cambio el tamaño de mi pantalla hasta donde se debe truncar el contenido de videoAssetCard__Details , en su lugar, todo el componente deja de cambiar el tamaño para que el contenido de ese div nunca se corte. . Muy confundido por qué sucede esto, ya que funciona en el codepen. ¿Alguien tiene idea de lo que estoy haciendo mal?