0

Lo que quiero es que cuando el TAG se salga del contenedor, se ponga en la línea de debajo:

introducir la descripción de la imagen aquí

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.

4
  • Faltaría incluir qué es flex-row. Me imagino que es algo que añade display:flex y flex-direction:row, pero es por confirmar. En cuyo caso, la solución probablemente sería añadir un flex-wrap: wrap.
    – Alvaro Montoro
    Commented el 23 jun. 2022 a las 23:24
  • Si, efectivamente flex-row aplica esos dos estilos al contenedor
    – lRetro
    Commented el 26 jun. 2022 a las 14:09
  • ¿Entonces funcionó lo de poner flex-wrap: wrap?
    – Alvaro Montoro
    Commented el 27 jun. 2022 a las 11:34
  • 1
    Disculpa, se me olvidó, sii, efectivamente era eso lo que le faltaba, muchas gracias!
    – lRetro
    Commented el 27 jun. 2022 a las 15:02

1 respuesta 1

0

Por defecto, cuando usas Flexbox, los elementos no se colapsan o mueven a la siguiente fila, sino que se siguen en la dirección indicada ajustando su tamaño para entrar dentro del contenedor, o directamente excediéndolo si no pueden disminuir más el tamaño.

Para hacer que los elementos salten a la siguiente fila (o columna si estás usando flex-direction: column), debes indicarlo usando la propiedad flex-wrap con el valor wrap. Así es como se haría en el código que compartes (reducido):

              /* ... */
           
              .video_tags {
                @include flex-row;
                flex-wrap: wrap;
                padding: 20px;
                width: inherit;

                /* ... */

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.