Flexbox, positionnement absolu et 100% de la hauteur

J'ai couru dans un peu d'un problème en jouant autour avec un flexbox à l'intérieur d'un absolu, qui est à l'intérieur d'un div de hauteur définie (je vais vous expliquer le long du chemin).

Tout d'abord, voici un violon pour ma démo, peut-être plus facile à appréhender le problème:
https://jsfiddle.net/8ub9tyub/

Comme vous pouvez le voir, lorsque vous placez le bloc, le texte apparaît ci-dessous, mais ne pas tout montrer.

J'ai une div principale (appelons $) pour le vol stationnaire, qui est 600x250px avec un overflow: hidden, et à l'intérieur, deux divs: le titre et le texte (dire $titre et $texte), qui apparaissent l'une après l'autre (flux régulier).

$titre peut parfois prendre jusqu'à deux lignes, de sorte que sa hauteur est réglée sur auto.
$texte est fixée à 100% de la hauteur, positionné en relatif et mis à display: flex. À l'intérieur c'est une autre div ($intro) j'ai placé dans l'absolu, avec une top: 100% (qui passe à 0 lors de son survol) et un align-self: flex-end afin de le maintenir au fond de $. (c'est de garder le texte d'être coincé dans le titre - je l'aime à respirer)

La structure va comme ça, en fait:

<div class="main">
 <div class="title">I'm a title!</div>
 <div class="text">
  <div class="intro"><p>Just a bunch of long paragraphs of text</p></div>
 </div>
</div>

Maintenant, comme vous pouvez le voir sur ma démo, $textehauteur est réglée à 100%, mais je m'attendais à la hauteur de $moins $titre's hauteurs, mais ici, il semble être juste $hauteur, ce qui rend la $texte bloc de débordement, et donc quand je survole le bloc pour faire apparaître le texte, il verrouille le bas à l'extérieur $ et coupe d'une partie du texte.

Ce que quelqu'un a un indice a de comment je peux faire $texte ont la hauteur prévue, sachant que je ne peux pas prédire $titrehauteur (et donc ne pouvez pas utiliser calc(), au moins pour que je sache) et je ne veux pas utiliser JavaScript?

Tu dois aimer les questions avec liens brisés. Veuillez s'il vous PLAÎT toujours lien vers quelque chose comme jsfiddle/plnkr/codepen/etc... Donc il va au moins y rester.
Vous avez raison! Désolé d'être si en retard, mais j'ai mis à jour le post avec un lien vers un violon à la place. Merci de m'appeler sur ce, j'apprécie sincèrement.

OriginalL'auteur chriskirknielsen | 2014-12-06

  1. 0

    Alors laissez-moi obtenir ce droit, vous avez:

    <div class='main'>
    <div class='title'>
        <div class='text'></div>
    </div>
</div>

    Et le réglage de la hauteur de la div texte à 100%, il définit à la hauteur de principal même si c'est à l'intérieur de la div titre. Je pense que le problème est peut-être que vous n'avez pas d'indiquer la hauteur de .titre dans votre CSS. Si vous ne spécifiez pas la hauteur du titre div, puis le texte de la division prendra de la hauteur de la div principale.

    De nouveau, juste une supposition, mais vérifier que.

    Hey, merci de prendre un coup d'oeil! Non, en fait titre et texte sont des frères et sœurs (dont j'ai écrit la structure dans mon post ci-dessus). Comme je l'ai dit, titre a hauteur variable, donc je ne peux pas spécifier une valeur fixe. Vous avez raison à ce sujet, cependant. J'ai essayé de mettre une hauteur en pixels, et on dirait qu'il travaille. De toute façon pour contourner cela? À hauteur variable pour titre je ne peux pas utiliser cette solution, j'en ai peur.
    Hmm problème difficile de comprendre comment le corriger. Pas sûr.
    Merci pour regarder en. Dans cette situation, je pense que je vais soit besoin de JS ou flexboxes.

    OriginalL'auteur Tai Kwangi Chicken