Table-row, scroll et hauteur fixe

Bonsoir tout le monde,

je suis face à un léger problème,
j'aimerai faire un carré de 200px sur 200px avec pour contrainte de créer un titre de hauteur fluide avec un conteneur de hauteur fixe (mais pouvant s'adapter automatiquement à la hauteur de mon carré), donc un conteneur acceptant une scrollbar quand le texte dépasse les 200px - hauteur du titre.

En gros voila ma structure :

HTML :

<div class="box">
  <div class="grid">
    <div class="row"><h1>Titre</h1></div>
    <div class="row full">
      <div class="scroll">
        test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />
      </div>
    </div>
  </div>
</div>

CSS :

.box {
  width: 200px;
  height: 200px;
  background: red;
}
.grid {
  display: table;
  width: 100%;
  height: 100%;
}
.row {
  display: table-row;
}
.row.full {
  height: 100%;
}
.scroll {
  overflow: auto;
  height: 100%;
}

Ce code marche parfaitement sur chrome mais pas sur le reste du monde
Pouvez vous me donner une astuce pour que ça marche partout ?

Codepen

Merci d'avance,
Jonathan

Bonjour,

Ce que tu souhite faire est a la base incompatible avec le comportement de <table> ou display:table & Cie. La particularité de ce type de formatage est d'adapté à la taille du conteneur au contenu quelque soit la taille initiale donnée. table-layout peut contenir la largeur, mais rien pour la hauteur.

Si ta boite est de dimension connues, tu peut te servir du positionnement relatif/absolu, toujours en evitant display:table & Cie qui prend mal le positionement relatif.

enfin, si cela correspond a l'effet recherché : http://codepen.io/anon/pen/maDtb
Cdt

Merci pour ta réponse gc-nomade
Par contre si la hauteur du titre change, ça ne marche plus
Chrome est vraiment trop permissif !

En fait il suffirait que position:relative passe sans probleme dans un <table> ou display:table & Cie, pour que ce que tu veut faire soit simple et fluide. Tu n'est pas le premier confronté a ce manque ou defaut
++