pタグをdiv内にストレッチさせる方法

Question

実現したいこと

pタグを使って書いた文をdiv内にストレッチさせたいです。
ご存知の方、教えてください！

該当のソースコード

<div class="test">
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque officiis id quos? Sed, earum dolor nobis amet esse sint id veniam consectetur? Nam culpa laborum expedita hic blanditiis animi aperiam.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque officiis id quos? Sed, earum dolor nobis amet esse sint id veniam consectetur? Nam culpa laborum expedita hic blanditiis animi aperiam.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque officiis id quos? Sed, earum dolor nobis amet esse sint id veniam consectetur? Nam culpa laborum expedita hic blanditiis animi aperiam.</p>
</div>
  

.test {
  width: 400px;
  height: 400px;
  border: solid;
  display: flex;
  align-items: stretch;
}

試したこと

flex-boxやinline-block も試したけどうまくいきませんでした。

Comments

[int32_t]

そのコードでちゃんとストレッチされる(pがdivの全体を占める)と思いますが、何が期待と違いますか。

[m.ts10806]

現状と目指す状態を図示されたほうが良いと思います。
「ストレッチ」という表現だけでは主観によってしまうこともあり得ます。

[2ckD]

おそらく、.testにheightを指定しておきながら指定していないときみたいな見た目にしたいのかなと。
line-heightとかfont-size、margin、paddingで調節するしか無いんじゃないですかね

Answer 1

ご提示のものでできていますがあえていうならpのmarginを0にしてください

.test p{
margin:0;
}

Comments

[退会済みユーザー]

ちょっと言葉足らずでした、、、。
水平方向にdivの高さに合わせてストレッチしたいです。

この場合でも尚margin0は必要なのでしょうか？

[yambejp]

ちょっと意味がわかりません。
pは段落なので前後にmarginが自動で発生しますよね？
マージンをふくめてストレッチしていると思いますが？

[退会済みユーザー]

今の状態だとdivの上の方に寄ってしまっているので高さに合わせた行間になるようにしたいです。