Auto Expanding Divs

Question

I must be overlooking something or making it too complicated.

If it makes a difference, this is a "doHTML" template to be used on a Jcink forum.

How do I make the main text of this table automatically expand (no scroll) when more text is written. Right now it is cutting it off. There should also be a grey border at the bottom but the text and white box is covering it.

.aholder {
  width: 580px;
  height: auto;
  position: sticky;
  overflow: hidden;
}

.announcement {
  height: 500px;
  width: 560px;
  background: #e0e0e0;
  position: relative;
  border: 1px solid #ccc;
  z-index: 9991;
}

#announcement1 {
  height: 190px;
  width: 560px;
  background: url(https://img.nickpic.host/uuYG5f.png);
  position: relative;
  z-index: 9991;
}

#announcement1::before {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 70px 560px;
  border-color: transparent transparent #e0e0e0 transparent;
  content: "";
  position: absolute;
  top: 120px;
  left: 0;
  z-index: 9991;
}

#announcement-title {
  color: #aaa;
  text-transform: lowercase;
  transform: rotate(-7deg);
  font-size: 60px;
  font-family: springtime;
  padding-top: 65px;
  text-align: center;
  z-index: 9991;
}

#announcement-date-text {
  color: #aaa;
  text-transform: lowercase;
  transform: rotate(-7deg);
  font-size: 20px;
  text-align: right;
  padding-left: 320px;
  padding-top: 130px;
  z-index: 99960;
  position: absolute;
}

#announcement-main-text::before {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 60px 500px;
  border-color: transparent transparent #fefefe transparent;
  content: "";
  position: absolute;
  top: -60px;
  left: 0;
  z-index: 9991;
}

#announcement-main-text {
  padding: 10px 10px 1000px 10px;
  text-align: justify;
  width: 480px;
  left: 40px;
  position: relative;
  top: 140px;
  background: #fefefe;
  height: 100%;
  padding-bottom: 100px;
  margin-bottom: 100px;
}

help {
  color: #aaa;
  text-transform: lowercase;
  font-size: 12px;
  text-align: justify;
  width: 480px;
  height: 100%;
  left: 40px;
  position: sticky;
  padding-bottom: 100px;
  margin-bottom: 100px;
}

<div class="aholder">
  <div class="announcement">
    <div id="announcement1">
      <div id="announcement-title">
        announcement
      </div>

      <div id="announcement-date-text">

        february 20, 2022
      </div>

      <div id="announcement-main-text">
        <help>
          <p>That's what painting is all about. It should make you feel good when you paint. This is unplanned it really just happens. For the lack of a better word I call them hangy downs.</p>

          <p>Trees live in your fan brush, but you have to scare them out.</p>

          <p>The only prerequisite is that it makes you happy. If it makes you happy then it's good. Van Dyke Brown is a very nice brown, it's almost like a chocolate brown. Let all these things just sort of happen. You can do anything your heart can imagine.
            This is a fantastic little painting. You could sit here for weeks with your one hair brush trying to do that - or you could do it with one stroke with an almighty brush.</p>
          <p>The only prerequisite is that it makes you happy. If it makes you happy then it's good. Van Dyke Brown is a very nice brown, it's almost like a chocolate brown. Let all these things just sort of happen. You can do anything your heart can imagine.
            This is a fantastic little painting. You could sit here for weeks with your one hair brush trying to do that - or you could do it with one stroke with an almighty brush.</p>
          <p>The only prerequisite is that it makes you happy. If it makes you happy then it's good. Van Dyke Brown is a very nice brown, it's almost like a chocolate brown. Let all these things just sort of happen. You can do anything your heart can imagine.
            This is a fantastic little painting. You could sit here for weeks with your one hair brush trying to do that - or you could do it with one stroke with an almighty brush.</p>
          <p>The only prerequisite is that it makes you happy. If it makes you happy then it's good. Van Dyke Brown is a very nice brown, it's almost like a chocolate brown. Let all these things just sort of happen. You can do anything your heart can imagine.
            This is a fantastic little painting. You could sit here for weeks with your one hair brush trying to do that - or you could do it with one stroke with an almighty brush.</p>
          <p>The only prerequisite is that it makes you happy. If it makes you happy then it's good. Van Dyke Brown is a very nice brown, it's almost like a chocolate brown. Let all these things just sort of happen. You can do anything your heart can imagine.
            This is a fantastic little painting. You could sit here for weeks with your one hair brush trying to do that - or you could do it with one stroke with an almighty brush.</p>
          <p>The only prerequisite is that it makes you happy. If it makes you happy then it's good. Van Dyke Brown is a very nice brown, it's almost like a chocolate brown. Let all these things just sort of happen. You can do anything your heart can imagine.
            This is a fantastic little painting. You could sit here for weeks with your one hair brush trying to do that - or you could do it with one stroke with an almighty brush.</p>


          <p>These trees are so much fun. I get started on them and I have a hard time stopping. When things happen - enjoy them. They're little gifts. If what you're doing doesn't make you happy - you're doing the wrong thing.</p>
        </help>
      </div>

    </div>
  </div>
</div>

Link to JSFiddle: https://jsfiddle.net/rayneb/05et8mg9/82/

Answer 1

The problem is that you are setting a height for various elements. If you want the height to be flexible and take as much as it needs, leave it to the default auto value.