<div> qui prends 100% de la taille (media query + autres <div>)

Bonjour à tous,

Voilà mon soucis que je rencontre avec les Media Queries et la taille.

Code HTML :

<div class="details">
   <div class="details-numero">1</div>
   <div class="details-categorie">infos</div>
   <div class="details-objet">nom de l'objet</div>
   <div class="details-lien"><a href="#">le lien</div>
</div>

Code CSS standard :

.details {
  width: 800px;
}

.details-numero {
  display: inline-block;
  width: 100px;
}

.details-categorie {
  display: inline-block;
  width: 100px;
}

.details-objet {
  display: inline-block;
  width: 85%;
}

.details-lien {
  display: inline-block;
  width: 200px;
}

Les Medias Queries :

@media screen and (max-width: 992px) {
    .details-objet {
      width: 70%;
    }
}

@media screen and (max-width: 768px) {
    .details-objet {
      width: 60%;
    }
}

@media screen and (max-width: 667px) {
    .details-objet {
      width: 50%;
    }
}

@media screen and (max-width: 414px) {
    .details-objet {
      width: 40%;
    }
}

Les tailles (width), ne sont qu’à titre d’exemple pour ce sujet et ne reflète pas la réalité.

Donc voilà le problème concerne la class details-objet , c’est le pourcentage, je dois le régler pour chaque taille d’écran, j’ai environ 10 media query différentes pour cela.

Pourquoi autant ? car si j’utilise un Kindle, ça sera trop grand, si j’utilise un iPhone 7, ça sera trop petit, etc.

Ma question est, y’a t il un moyen pour permettre à details-objet d’avoir une taille automatique qui prennent tout l’espace restant entre les autres <div> ?

J’ai essayé un width: 100% ou auto, ça ne fonctionne pas car ça prends les 800px du <div class="details">

En effet, c’est parfait

j’ai tout viré, refait tout au propre, ça a trop amélioré mon code !

merci