Limiter la taille d'un conteneur Flex

Hardware
Les bases HTML/CSS

Bonjour,

Je viens demander un peu d'aide, j'espère que vous aurez la solution :)

Je voudrais limiter un conteneur Flex au niveau de sa largeur, j'ai bien essayé avec la directive max-width mais les proportions ne sont pas conservées lorsque la fenêtre est redimensionnée (logique). Les résolutions inférieures (tablette, smartphone) auront un problème. Il faudrait une limite qui s'adapte aux proportions de l'écran.

J'ai développé un chat avec Node.js, mais le problème c'est que certains membres peuvent rendre inutilisable le chat à cause de ce problème, en multipliant les balises citations (c'est du vécu, j'étais obligé d'éditer directement dans redis vu que les boutons pour supprimer les messages n'apparaissaient plus...), exemple :

Avec un max-width:900px (du coup le menu de droite est anormalement grand...) :

Sans limite au niveau de la largeur :

J'ai essayé un min-width au niveau du menu de gauche et un max-width sur le conteneur du milieu en % pour les deux, mais les proportions ne sont toujours pas conservées.

Code :

 .section--center {
    flex-grow: 4;
    flex-shrink: 0;
    flex-basis: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
 }

Le reste du code est disponible ici :

https://github.com/mondediefr/mondedie-chat/blob/master/client/scss/_layout.scss#L71
https://github.com/mondediefr/mondedie-chat/blob/master/client/scss/_section-center.scss#L5

Une idée ?

Je voudrais trouver une solution purement CSS vu que c'est un problème de positionnement et éviter d'imposer une limite au niveau des balises markdown au niveau du code JS.

1 réponse

Hardware
Auteur
Réponse acceptée

Bon on a trouvé une solution en JS, c'est pas très propre mais ça fonctionne bien qu'importe la résolution (mobile/tablette/desktop) et le navigateur :

  function setSectionCenterWidth() {
    var size = 0;
    if($(window).width() < 992) {
      // 50px = largeur menu de droite en mode mobile/tablette
      size = $(window).width() - 50;
    } else {
      // 0.64 = coef largeur du block .section--center en mode desktop
      size = $(window).width() * 0.64;
    }

    $('.section--center').css({
      'max-width': size
    });
  }

  setSectionCenterWidth();

  window.onresize = function() {
    setSectionCenterWidth();
  }