Lo que quiero es que cuando el TAG se salga del contenedor, se ponga en la línea de debajo:
En este caso el TAG "PRUEBA" debería ir debajo de los que tiene atrás.
Este es el código que tengo:
<div className={styles.video_details}>
<div className={styles.video_title_duration}>
<p>{video.title}</p>
<p>{`${video.duration} min`}</p>
</div>
<div className={styles.video_tags}>
{video.tags !== ""
? video.tags.split(" ").map(tag => <p>{tag}</p>)
: ""}
</div>
</div>
CSS
.video_details {
background-color: rgba(231, 41, 134, 1); //$primary_regular40 sin transparencia;
background-repeat: no-repeat;
.video_title_duration {
align-items: center;
height: 50px;
width: 100%;
@include secondary-caption;
display: flex;
justify-content: space-around;
p:first-child {
width: 70%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
}
.video_tags {
display: none;
}
}
&:hover {
transform: scale(1.3);
z-index: 2;
.video_bg {
opacity: 1;
}
.video_details {
height: 90%;
opacity: .9;
@include flex_column_justify_space_between;
.video_tags {
@include flex-row;
padding: 20px;
width: inherit;
p {
background-color: $gris300;
margin-left: 10px;
border-radius: 8px;
padding: 5px 10px;
opacity: 1;
}
}
}
}
Anotación: los TAGS solo se ven cuando se hace hover sobre la tarjeta.
flex-row
. Me imagino que es algo que añadedisplay:flex
yflex-direction:row
, pero es por confirmar. En cuyo caso, la solución probablemente sería añadir unflex-wrap: wrap
.flex-wrap: wrap
?