How to Grow a Block Vertically to Fit Text?-CodePudding

I'm making a website for a friend who isn't very tech savvy. She wants a box that'll get bigger based on how many lines of text she puts in on the back end.

This is the relevant page. She wants the light grey box (and the dark grey one too, I guess) to grow as she adds more pages to the list. Problem is, I only know rudimentary CSS from building a basic website for fun.

I've been attempting to use CSS grids to evenly space the entries, but that's not working, and I haven't been able to find a way to grow the boxes based on the text. Any help is appreciated.

<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset='UTF-8'>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>
  Watch as I Perform my own Tracheotomy
  </title>
  <link rel="shortcut icon" type="image/png" href="https://cdn.discordapp.com/attachments/889079414732779580/1028746579101876264/Icon.png"/>
</head>





<style>
.square {
  height: 550px;
  width: 100%;
  background-color: #8C8C8C;
}
.square2 {
  height: 400px;
  width: 900px;
  background-color: #B8B8B8;
  margin: auto;
  margin-bottom: 25px;
  display: grid;
  grid-template-rows: 80px 200px;
}
.square3 {
  margin-top: 10px;
  height: 100px;
  width: 900px;
  background-color: #8C8C8C;
  margin: auto;
}
.log {
  width: fit-content;
  gap: 10px;
  padding: 5px;
  margin-bottom: 0em;
  font-size:1.5em;
}
</style>




<body style="background-color:#212121;">

<div>
        <p style="text-align:left; font-family:'Courier New'">
        <FONT COLOR="#FFFFFF">
        <br>
&nbsp;&nbsp;
<u>Watch As I Perform My Own Tracheotomy.</u>
<br>
<br>
</p>
      </div>
      
<div >
<div >

    <p style="text-align:left; color:#FFFFFF; margin-left:4%; font-family:'Courier New';"><FONT COLOR="#000000"><br><br>

<div >
<br>&nbsp;&nbsp;<b>11/10/22</b> - <a href="https://juney-blues.tumblr.com/tracheotomy/7">Page 7</a> </div>

<div >
<br>&nbsp;&nbsp;<b>09/10/22</b> - <a href="https://juney-blues.tumblr.com/tracheotomy/6">Page 6</a></div>

<div >
<br>&nbsp;&nbsp;<b>09/10/22</b> - <a href="https://juney-blues.tumblr.com/tracheotomy/5">Page 5</a></div>

<div >
<br>&nbsp;&nbsp;<b>09/10/22</b> - <a href="https://juney-blues.tumblr.com/tracheotomy/4">Page 4</a></div>

<div >
<br>&nbsp;&nbsp;<b>08/10/22</b> - <a href="https://juney-blues.tumblr.com/tracheotomy/3">Page 3</a></div>

<div >
<br>&nbsp;&nbsp;<b>08/10/22</b> - <a href="https://juney-blues.tumblr.com/tracheotomy/2">Page 2</a></div>

<div >
<br>&nbsp;&nbsp;<b>08/10/22</b> - <a href="https://juney-blues.tumblr.com/tracheotomy/1">Page 1</a> </div>

        </p>

    </div>
    </div>
    
  <div >
      <p style="text-align:left; font-size:.9em; font-family:'Courier New'; margin-top: 150px; margin-left:3%;">
  </div>
    
    
    </body>
</html>

CodePudding user response：

Try this, wrap your text with class item, or maybe you can explore from this snippet.

.container {
  border: 2px solid #ccc;
  padding: 10px;
  width: 30em;
}

.item {
  width: -moz-fit-content;
  width: fit-content;
  background-color: #8ca0ff;
  padding: 5px;
  margin-bottom: 1em;
}

<div >
  <div >Item</div>
  <div >Item with more text in it.</div>
  <div >
    Item with more text in it, hopefully we have added enough text so the text
    will start to wrap.
     in it, hopefully we have added enough text so the text
    will start to wrap.
     in it, hopefully we have added enough text so the text
    will start to wrap.
     in it, hopefully we have added enough text so the text
    will start to wrap.
     in it, hopefully we have added enough text so the text
    will start to wrap.
   
  </div>
</div>