Mon contenu dépasse du conteneur

Le contenu ne reste pas dans le conteneur (la section) que je souhaiterais (il dépasse quand la fenêtre est ouvert à sa dimension maximum). Cette section est déterminé par un height: 100vh il prendra verticalement toute la taille de la fenêtre. Le problème est que le contenu de cette section dépasse de la limite de sa propre dimension.

J'aimerais que ça ne soit pas le cas.

J'ai essayé une nouvelle fois max-width:100% et max-height:100% et beaucoup d'autres techniques mais cela n'a pas d'impact sur la mise en page l'image dépasse toujours de la section.

J'utilise des tailles de police en vmax peut-être est-ce là le problème ?

Y a-t-il un rapport avec overflow ? Je ne pense pas, je ne veux pas un scrool ou autre, je veux juste qu'il ne dépasse pas de son conteneur. Qu'il stop l'agrandissement une fois qu'il a atteint sa dimension maximum de son conteneur.

Avez-vous une solution ?

<section class="toutesection">
    <div class="contenusection">
        <div id="contenuarticlesection4">
            <article>
                <h1>Démarche</h1>

                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec
                    sagittis massa. Nulla facilisi. Cras id arcu lorem, et semper purus.
                    Cum sociis natoque penatibus et magnis dis parturient montes,
                    nascetur ridiculus mus. Duis vel enim mi, in lobortis sem.
                    Vestibulum luctus elit eu libero ultrices id fermentum sem sagittis.
                    Nulla imperdiet mauris sed sapien dignissim id aliquam est aliquam.
                    Maecenas non odio ipsum, a elementum nisi. Mauris non erat eu erat
                    placerat convallis.
                </p>

                <div id="banniere">
                    <img src="images/banniere.png" alt="photo représentant des personnes solidaire" />
                </div>
            </article>
        </div>
    </div>
</section>

.toutesection {
    border: solid #d40707;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

contenuarticlesection4 {
    border: solid #ff00c8;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    max-width: 100%;
    max-height: 100%;
}

contenuarticlesection4 article {
    border: solid #d5fa04;
    max-width: 100%;
    max-height: 100%;
}

contenuarticlesection4 img {
    max-width: 100%;
    max-height: 100%;
}

ul li, p {
    list-style-type: none;
    text-align: justify;
    font-size: 1.6vmax;
}

contenuarticlesection4 p {
    font-size: 1.6vmax;
}

contenuarticlesection4 h1 {
    font-size: 2vmax;
}

@media all and (min-width: 1024px) {
    .contenusection {
        margin-left: 8vw;
        margin-right: 8vw;
        max-width: 100%;
        max-height: 100%;
    }

    section {
        border: solid #d4f806;
        height: 100vh;
        width: 100%;
        overflow: hidden;
    }
}

Les border sont juste là pour mieux me repérer visuellement.
Modifié par DanKee (14 Sep 2022 - 11:32)

DanKee a écrit :
Cette section est déterminé par un height: 100vh il prendra verticalement toute la taille de la fenêtre. Le problème est que le contenu de cette section dépasse de la limite de sa propre dimension.

Hello,

En effet, height est figé et ne s'adapte pas au contenu. Si tu veux une hauteur minimum qui peut s'agrandir, c'est min-height: 100vh qu'il te faut

Oui c'est en effet une solution pour que pour que cela entre dans son conteneur si je mets un min-height mais je n'ai plus la dimension de l'écran mais plutôt la dimension de l'écran + le contenu plus grand qui dépasse du vh. hors je veux que la section reste avec une hauteur de 100vh.
Moi je ne souhaite pas que le conteneur s'adapte au contenu mais le contraire, que le contenu s'adapte au conteneur. Avez-vous une solution pour ça ?
Merci beaucoup pour ta réponse Raphael !
Modifié par DanKee (14 Sep 2022 - 14:29)

Salut,

il doit faire quoi le "contenu" pour s'adapter au "conteneur" ?

Il doit rapetisser ? Ou il faut en couper un bout pour que ça rentre ?
Modifié par Mathieuu (14 Sep 2022 - 15:40)

Au moment où le "contenu" a atteint les dimensions maximum de son "conteneur", le "contenu" doit arrêter de grandir et non pas le dépasser comme c'est le cas. donc le "contenu" s'adapte aux dimensions du "conteneur".

Donc pas overflow:hidden parce que ça coupe le contenu.

Je crois qu'il faut que je mettes un max-content ou min-content quelque part mais je ne sais pas où...

Je suis perdu et je ne sais pas si je suis sur la bonne voie.

Dans ce cas pourquoi ne pas utiliser une hauteur maximum pour l'image ? Exemple :

.monImage {
  width: 100%;
  max-height: 500px;
}

Bonsoir,

Ton soucis est complexe.

Quels quantité et type et de contenu précède ton image (texte, élément de formulaire, d'autres images, nombre d’éléments de type block, ... , hauteur de la fenêtre d'affichage et sa largeur, etc...?

Simplement avec des écrans de hauteurs et largeurs différentes, tu peut passer d'un contenu perdu dans la fenêtre ou débordant de partout. D'un écran 4Ka un écran de mobile, il y a tellement de possibilité qu'il va surement te falloir faire des compromis et prévoir des déclinaisons d'affichages acceptables/adaptées.

Malgré tout, si le contenu est court et concis et que l'image sert d'illustration, une approche en grille(flex/grid) et une image avec un affichage via object-fit pourrait-être une option pour la redimensionné sans qu'elle déborde, voir ne pas l'affiché du tout si l'écran n'a plus de place .... ça c'est pour l'mage,
... sinon, à propos du contenu précédant l'image, si lui est aussi trop important , tu souhaites faire quoi ? - le couper, - autoriser le défilement, - réduire la taille du texte et peut-être le rendre illisible car trop petit ?

Enfin
- en raccourcie, si je comprend, l'mage devrait occuper l'espace restant sous le contenu pour finir de remplir la fenêtre du navigateur, si il y a encore de la place ? sinon? il est décidé de faire quoi avec un contenu débordant ?

cdt
Modifié par gcyrillus (16 Sep 2022 - 23:17)