Why is my div not expanding with the other div?-CodePudding

i cant figure out why my #Maintext div goes outside the #Content div, it should expand together with the #MainContent div. I've tried a couple of things, but it wont work. If i set the #Content div height to auto, it just dissappears from the screen while i can still see the #Maintext div. Or would it have to do something with the position? Or can't i have the height of the #Maintext set to auto?

ps: the br is for the #Maincontent div to go outside the #Content div but i would want the #Content div height to adjust to it.

Thanks for the help, Coco

the darker brown should expand with the red box(but it doesnt)

#Content {
  width: 1600px;
  height: 1000px;
  position: absolute; 
  left: 320px;
  top: 110px;
  background-color: #d5c590;
  border-style: solid;
  border-radius: 10px;
}

#Maintext {
 width: 570px;
 height: auto;
 background-color: red;
 font-size: 20px;
}

<div id="Content" > 
      <div>
        <main >
        <h1>Titel 1</h1>
        <hr></hr>
      </div>
      <hr></hr>
      <div id="Maintext">
        <p>text</p>

          <p>Start</p>
          <br></br>
          <br></br>
          <br></br>
          <br></br>
          <br></br>
          <br></br>
          <br></br>
          <br></br>
          <br></br>
          <br></br>
          <br></br>
          <br></br>
          <br></br>
          <br></br>
          <br></br>
          <br></br>
          <p>Finish</p>
          

      </div>
    </div>

emphasized text strong text

CodePudding user response：

You should use this css to overcome your issue of main div.

#Content {
  position: relative;
  width: 100%; 
  left: 320px;
  top: 110px;
  background-color: #d5c590;
  border-style: solid;
  border-radius: 10px;
}

#Maintext {
 width: 570px;
 height: auto;
 position: relative;
 background-color: red;
 font-size: 20px;
}

<div id="Content" > 
      <div>
        <main >
        <h1>Titel 1</h1>
        <hr></hr>
      </div>
      <hr></hr>
      <div id="Maintext">
        <p>text</p>

          <p>Start</p>
          <br></br>
          <br></br>
          <br></br>
          <br></br>
          <br></br>
          <br></br>
          <br></br>
          <br></br>
          <br></br>
          <br></br>
          <br></br>
          <br></br>
          <br></br>
          <br></br>
          <br></br>
          <br></br>
          <p>Finish</p>
          

      </div>
    </div>