html、cssにてコメントの量に応じて要素の縦幅を増やす方法

前提・実現したいこと

当方railsにてチャットアプリを作成しております。（簡素なラインのメッセージ画面を想定しております）
現在、メイン画面のメッセージ表示部分をマークアップ中です。
そこでメッセージの量に応じてメッセージの縦幅を広くする方法が分からず、以下のような大量の文章を打つとメッセージの下に配置してあるユーザーネームや投稿日時に文字が被ってしまいます。
文字量に応じて要素を縦に広げる方法をご存知の方がいらっしゃいましたらご教授いただけると幸いですm(_ _)m

###htmlコード,index.html.erb

html
1    <div class="Main__right__message">
2      <div class="Main__right__message__block">
3        <div class="Main__right__message__block-text">サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</div>
4        <div class="Main__right__message__block-info">
5          <div class="Main__right__message__block-info-name">太郎</div>
6          <div class="Main__right__message__block-info-time">2020/06/01 12:45</div>
7        </div>
8      </div>
9      <div class="Main__right__message__block">
10        <div class="Main__right__message__block-text">メッセージ</div>
11        <div class="Main__right__message__block-info">
12          <div class="Main__right__message__block-info-name">次郎</div>
13          <div class="Main__right__message__block-info-time">2020/06/01 11:45</div>
14        </div>
15      </div>
16    </div>

###cssコード,index.scss

css
1    &__message{
2      height: 90%;
3      &__block{
4        height: 15%;
5        margin: 5px 5px 10px 5px;
6        position: relative;
7        &-text{
8          margin: 5px;
9          font-size: 20px;
10          display: inline;
11        }
12        &-info{
13          display: flex;
14          position: absolute;
15          bottom: 0px;
16          margin: 5px;
17          color: rgb(146, 145, 145);
18          &-name{
19
20          }
21          &-time{
22            margin-left: 20px;
23          }
24        }
25      }
26    }
27

試したこと

min-heightでデフォルトの高さを決め、height:auto;も記述しておけば、という記事を発見し実行したのですが上手くいきませんでした、、、

行動規範の内容に同意します

回答3件

ベストアンサー

absoluteをやめればいいかと思います。

css
1.Main__right__message__block-info {
2	display: flex;
3	/* position: absolute; */
4	bottom: 0px;
5	margin: 5px;
6	color: #929191;
7}

投稿2020/06/16 08:44

Lhankor_Mhy

総合スコア36960

ko_no

2020/06/16 08:58

コメントをいただいたお二方のポイントを直したところ上手くいきました！！（absoluteを削除し、height:auto;を設定する）本当にありがとうございました！！

行動規範の内容に同意します

&__blockのheightを決めなければ（デフォルト時のauto値）いけます。

投稿2020/06/16 08:41

編集2020/06/16 08:42

miyabi_pudding

総合スコア9555

ko_no

2020/06/16 08:58

行動規範の内容に同意します

min-heightでデフォルトの高さを決め、height:auto;も記述しておけば、という記事を発見し実行したのですが上手くいきませんでした、、、

上記の内容と画像から、推測すると、下記のようなことがしたいのかな？

scss
1.Main__right__message {
2      height: 90%;
3      &__block{
4        height: auto;     /* 高さ自動 */
5        min-height: 60px; /* 最小高さ */
6        padding-bottom: 30px; /* 名前と日付の行の高さを確保 */
7        margin: 5px 5px 10px 5px;
8        position: relative;
9        &-text{
10          margin: 5px;
11          font-size: 20px;
12          display: inline;
13        }
14        &-info{
15          display: flex;
16          position: absolute;
17          bottom: 0px;
18          margin: 5px;
19          color: rgb(146, 145, 145);
20          &-name{
21
22          }
23          &-time{
24            margin-left: 20px;
25          }
26        }
27      }
28    }