[Résolu] Choisir un élément fluide pour fixer la largeur du parent

Bonjour,

Ce codepen illustre mon problème.

J'ai deux paragraphes et un tableau.

La largeur du tableau est fixée par le contenu, il est impossible de la prédire a priori.

Mais je veux que cette largeur soit celle des paragraphes également fluides et plus larges que le tableau.

Peut-on y arriver en CSS ?
div {width: la largeur de cette tabla}

GRID ou FLEXBOX n'ont pas prévu le cas, il me semble.

Ou un JS mais fiable en production.

S'il faut changer la structure HTML pas de souci.

Salut,

Je ne comprends pas bien ta question. Suivant ce que j'ai compris

table{
  width: 100%;
}

edit: Si tu veux que les <p> aient la largeur du tableau. Je ne vois pas de solution en css. En JS :

let $table = document.querySelector('table'),
    width_table = $table.getBoundingClientRect().width,
    $ps = document.querySelectorAll('p')
$ps.forEach($p => $p.style.width = `${width_table}px`)

Modifié par niuxe (16 Jan 2023 - 21:38)

Bonjour niuxe,

Merci de ton suivi.

Ton code JS fait le boulot.

Je l'ai intégré au codepen.

Penses-tu que c'est fiable en production ?

@boteha_2: le code que je t'ai produit fonctionne. Mais il faut que tu fasses les vérifications d'usage (est ce que table ne vaut pas null et est ce que les p ne valent pas null). Ceci dit la solution de gcyrillus est plus pertinente.

@gcyrillus: merci. Je ne connaissais pas. D'ailleurs, lorsque j'ai répondu au sujet, j'ai pensé à toi Puis tu es passé par là

edit : j'ai noté la solution de gcyrillus comme la plus appropriée (meilleur solution).
Modifié par niuxe (17 Jan 2023 - 04:50)

Bonjour gcyrillus,

Merci de ton suivi.

min-content et max-content, d'accord.

Je reviens vers vous en fin de journée.

J'ai mis à jour le codepen avec le code de gcyrillus.

C'est l'option table {width:max-content} que j'ai retenue.

Difficile de faire plus simple.

Est-ce bien supporté par les navigateurs ?

min-content
Va chercher la plus petite largeur des enfants directs, est-ce bien cela ?

max-content : la largeur intrinsèque préférée.
Je ne comprends pas trop mais l'effet est parfait.

boteha_2 a écrit :


Est-ce bien supporté par les navigateurs ?

Plutôt oui, voir https://caniuse.com/mdn-css_properties_width_max-content

min-content
Va chercher la plus petite largeur des enfants directs, est-ce bien cela ?
Oui,
alternative si pas supporté pour un element block : display:table;+width:0+table-layout:auto;

max-content
Va prendre la plus grande largeur cumulée qu'un texte , élément en ligne peuvent occupés, ici chaque cellule de ton tableau affiche le texte sur une seule ligne.
Alternative si min-content pas supporté : white-space:nowrap sur les cellules .

Bonne journée

Bonjour,

gcyrillus, merci de tes précisions.

J'ai voulu corser un peu le problème et me rapprocher de la situation en réel.

Dans le codepen j'ai ajouté sous le tableau un deuxième tableau de taille plus petite.

C'est toujours la taille du grand tableau qui fixe la largeur.

Cela me convient parfaitement mais ma définition de min-content devient inexacte.

min-content
Va chercher la plus petite largeur des enfants directs

Ben non, autrement ce serait la taille du petit tableau qui serait prise en compte.

Va chercher la plus petite largeur des enfants directs, mais sans écraser un autre élément fluide.

C'est mal dit mais l'idée est-elle là ?
Modifié par boteha_2 (18 Jan 2023 - 13:06)

Bonjour,

boteha_2 a écrit :
Bonjour,

gcyrillus, merci de tes précisions.

J'ai voulu corser un peu le problème et me rapprocher de la situation en réel.

j'ai ajouté sous le tableau un deuxième tableau de taille plus petite.

C'est toujours la taille du grand tableau qui fixe la largeur.



min-content
Va chercher la plus petite largeur des enfants directs


Ben non, autrement ce serait la taille du petit tableau qui serait prise en compte.

Heu oui, min-content prend la largeur du plus grand élément qu'il trouve , pour le coup c'est le mot le plus long ou une boite en ligne la plus large ou ton tableau le plus large.

boteha_2 a écrit :
...
Va chercher la plus petite largeur des enfants directs, mais sans écraser un autre élément fluide.

C'est mal dit mais l'idée est-elle là ?

Ton exemple applique un width:max-content sur le tableau, il occupe donc le maximum de largeur que lui impose ses contenus en lignes, et c'est le plus large qui dirige la danse.

Malgré tout, le plus grand ne peut pas prendre la largeur du plus petit sans avoir des débordement.
Un compromis serait de retiré ce width:max-content sur les tableaux et éventuellement de rajouté un table{min-width:100%} pour avoir une cohérence de largeurs de tous les tableaux, re-illustration https://codepen.io/gc-nomade/pen/rNrYBPE

cdt

Bonjour gcyrillus,

En fait ce qui se passe dans mon codepen me convient.

Les deux tables sont à largeur max-content et c'est la plus grande des deux qui fixe la largeur du parent.

Ton codepen est très intéressant :

table {min-width:calc(100% - 2em);/* parce-que margin:1em;*/}

On a bien avancé, j'attends mes expériences en test pré-production avant de cocher Résolu.

Encore merci.