0

In this CodePen, I am trying to get the .icon div to appear the full height of the div it's in. Unfortunately, it looks like it's loading before the text is there so the div has a height of 0 when it loads. How would I get it to load once the text is there and grab that full height? Preferably with no JS if possible.

All help is appreciated!

HTML

.faqSection {
  height: 600px;
  width: 100vw;
}

.topFaqSection {
  margin: 100px 0 40px 10vw;
}

.innerFaqSection {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
}

.leftFaq {
  width: 35%;
  height: 100%;
  /* background-color: violet; */
}

.rightFaq {
  width: 35%;
  height: 100%;
  /* background-color: blanchedalmond; */
}

.singleFaqBlock {
  margin: 20px 0 0 0;
}

.questionBlock {
  background-color: red;
  display: flex;
  flex-direction: row;
  align-content: flex-start;
}

.icon {
  background-color: blue;
  width: 50px;
  height: 100%;
}

.questionText {
  /* display: none; */
  background-color: green;
  width: 100%;
}

.answerBlock {}

.answerBlock p {
  margin: 0 0 0 62px;
}

.hiddenText {
  display: none;
}

.notHiddenText {
  display: block;
}
<div class="faqSection">

  <div class="topFaqSection">
    <h1>Questions? Look Here</h1>
    <div class="bar blue"></div>
  </div>

  <div class="innerFaqSection">

    <div class="leftFaq">

      <div class="singleFaqBlock">
        <div class="questionBlock">
          <div class="icon">
            <div class="circle-plus closed">
              <div class="circle">
                <div class="horizontal"></div>
                <div class="vertical"></div>
              </div>
            </div>
          </div>
          <div class="questionText">
            <h3>
              How do I earn a return?
            </h3>
          </div>
        </div>
        <div class="answerBlock">
          <p class="hiddenText">
            Yes! We would love to answer your question thank you for giving us the opoportunity!!
          </p>
        </div>
      </div>

      <div class="singleFaqBlock">
        <div class="questionBlock">
          <div class="icon">
            <div class="circle-plus closed">
              <div class="circle">
                <div class="horizontal"></div>
                <div class="vertical"></div>
              </div>
            </div>
          </div>
          <div class="questionText">
            <h3>
              What kind of returns can I expect?
            </h3>
          </div>
        </div>
        <div class="answerBlock">
          <p class="hiddenText">
            Yes! We would love to answer your question thank you for giving us the opoportunity!!
          </p>
        </div>
      </div>
    </div>

    <div class="space"></div>
    <div class="rightFaq">

      <div class="singleFaqBlock">
        <div class="questionBlock">
          <div class="icon">
            <div class="circle-plus closed">
              <div class="circle">
                <div class="horizontal"></div>
                <div class="vertical"></div>
              </div>
            </div>
          </div>
          <div class="questionText">
            <h3>
              When is the platform releasing?
            </h3>
          </div>
        </div>
        <div class="answerBlock">
          <p class="hiddenText">
            Yes! We would love to answer your question thank you for giving us the opoportunity!!
          </p>
        </div>
      </div>

      <div class="singleFaqBlock">
        <div class="questionBlock">
          <div class="icon">
            <div class="circle-plus closed">
              <div class="circle">
                <div class="horizontal"></div>
                <div class="vertical"></div>
              </div>
            </div>
          </div>
          <div class="questionText">
            <h3>
              Why invest in real estate? </h3>
          </div>
        </div>
        <div class="answerBlock">
          <p class="hiddenText">
            Yes! We would love to answer your question thank you for giving us the opoportunity!!
          </p>
        </div>
      </div>

      <div class="singleFaqBlock">
        <div class="questionBlock">
          <div class="icon">
            <div class="circle-plus closed">
              <div class="circle">
                <div class="horizontal"></div>
                <div class="vertical"></div>
              </div>
            </div>
          </div>
          <div class="questionText">
            <h3>
              I'm a - and interested in raising money through -, what should I do? </h3>
          </div>

        </div>
        <div class="answerBlock">
          <p class="hiddenText">
            Yes! We would love to answer your question thank you for giving us the opoportunity!!
          </p>
        </div>
      </div>
    </div>
  </div>
</div>
Calvin Nunes
  • 6,376
  • 4
  • 20
  • 48
Ryan Soderberg
  • 585
  • 4
  • 21

1 Answers1

1

As I said in a a comment, removing the height: 100% rule should fix it for you. The "why" for it is a bit... unsavory.

Flex children default to "align-self: stretch", so they'll stretch naturally. But when you set a height, it will use that value. The problem is percentage height is calculated from the height actually specified for the parent and .icon's parent (.questionBlock) has no height specified: so .icon gets 100% of 0. If you were to set a height to .questionBlock, .icon would adapt.

From the specs:

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.

This is the comment that pointed me into the right direction. Maybe check it out?

isacvale
  • 627
  • 8
  • 13