Flexbox définir taille pour les cellules

Bonjour,

Je travaille, pour le compte d'un ami, sur la création d'un thème perso pour Prestashop et je bute sur un soucis de flexbox.

Tout d'abord, voici les codes :

<section class="product-features">
    <p class="h6">Fiche technique</p>
    <dl class="data-sheet">
        <dt class="name">Composition</dt>
        <dd class="value">Coton</dd>
        <dt class="name">Propriété</dt>
        <dd class="value">Manches courtes</dd>
    </dl>
</section>

.product-features {
    margin-top: 1.25rem;
    margin-left: 0.3125rem;
}
.product-features > dl.data-sheet {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}
.product-features > dl.data-sheet dd.value,
.product-features > dl.data-sheet dt.name {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 40%;
    flex: 1 0 40%;
    font-weight: 400;
    background: #f1f1f1;
    padding: 0.625rem;
    margin-right: 0.625rem;
    min-height: 2.5rem;
    word-break: normal;
    text-transform: capitalize;
    margin-bottom: 0.5rem;
}
.product-features > dl.data-sheet dd.value:nth-of-type(2n),
.product-features > dl.data-sheet dt.name:nth-of-type(2n) {
    background: #f6f6f6;
}

Comme montré sur l'image ci-dessous, les deux colonnes ont la même taille.

Image 1

Ce que je cherche à faire depuis un moment est que la 1ère colonne prenne moins d'espace et que la seconde prenne la place restante comme ci-dessous :

Image 2

Je ne parviens pas à définir une taille sous peine que la seconde ligne se place à côté de la 1ère.

Je pensais aussi à une taille auto (pour la 1ère colonne) en fonction du contenu mais comme la taille des valeurs inscrites dans les cellules sera variable, la taille des colonnes le sera certainement aussi donc je pense qu'une valeur fixe serait plus simple à gérer.

Pouvez-vous m'aider ?

Je vous remercie d'avance.
Modifié par Xhanxhand (22 Dec 2020 - 19:42)

Et l'eau,

regarde ici

Merci niuxe mais il n'y a eu aucun changement que ce soit en ajoutant ce que tu as indiqué ou en reprenant exactement le même schéma du CSS. Les balises dt et dd prenait chacune 50% de l'espace.

J'ai tenté en les remplaçant par des span (et pareil dans le css) et miracle, ça fonctionne mais je ne sais pas si c'est bon qu'il n'y ai pas de dt et dd.

De plus, au lieu d'avoir un background différent une ligne sur deux, là c'est uniquement la seconde colonne qui diffère de la 1ère.

Au cas où, voici le code html (celui du fichier que je ne trouvait pas, celui que j'ai donné venait de la console Firefox) et le css actuel :

  {block name='product_features'}
    {if $product.grouped_features}
      <section class="product-features">
        <p class="h6">{l s='Data sheet' d='Shop.Theme.Catalog'}</p>
        <dl class="data-sheet">
          {foreach from=$product.grouped_features item=feature}
            <span class="name">{$feature.name}</span>
            <span class="value">{$feature.value|escape:'htmlall'|nl2br nofilter}<br /><br /></span>
          {/foreach}
        </dl>
      </section>
    {/if}
  {/block}

.product-features > dl.data-sheet span.name { width: 20%; }

.product-features > dl.data-sheet span.value { width: calc(80% - 10px); }

.product-features > dl.data-sheet span.value,
.product-features > dl.data-sheet span.name {
  background: transparent !important;
  color: #000;
}

.product-features > dl.data-sheet span.value:nth-of-type(2n),
.product-features > dl.data-sheet span.name:nth-of-type(2n) {
  color: #000 !important;
  background: #DAE3F1 !important;
  border-radius: 7px;
}

Je continue à fouiner ^^

Edit :

Je pense avoir trouvé, en tout cas, visuellement, c'est bon.

J'ai reprit le code html d'origine et j'ai modifié ton code comme ceci :

.product-features > dl.data-sheet dt.name { max-width: 20%; }

.product-features > dl.data-sheet dd.value { min-width: calc(80% - 10px); }

J'espère que ça ne me causera pas de soucis par la suite.
Modifié par Xhanxhand (23 Dec 2020 - 19:02)