TransWikia.com

Make a second child element comply with parent height and not overlap

Stack Overflow Asked on November 18, 2021

I have a problem with second child element section.nested overstepping parent div height.
I’ve tried and tried but can’t make it to comply with the parent div any ideas?

html,body,main {
  height: 100%
}
main {
   display: flex;
   flex-direction: column;
}

main > section {
    min-width: 31%;
    max-width: 74%;
    max-height: 74%;
    padding: 1.27rem;
    background-color: #575757;
}

main > section > div {
  height: 100%;
  max-height: 100%;
}

main section.nested {
  padding: 1rem;
  background-color: #ccc;
}

article {
  height: 600px;
  background-color: #eee
}
<main>
  <section>
    <div>
      <header>
        <h3>heading</h3>
        <p>Some text</p>
      </header>
      <section class="nested">
        <div>
          <article></article>
        </div>
      </section>
    </div>  
  <section>
</main>

I’m interested in just section.nested to comply without giving explicit px heights the rest of the overflow doesn’t matter

cssflexboxhtml

2 Answers

remove max-height: 74%; property from main > section

html,body,main {
  height: 100%
}
main {
   display: flex;
   flex-direction: column;
}

main > section {
    min-width: 31%;
    max-width: 74%;
    padding: 1.27rem;
    background-color: #575757;
}

main > section div {
  height: 100%;
  max-height: 100%;
}

main section.nested {
  padding: 1rem;
  background-color: #ccc;
}

article {
  height: 600px;
  background-color: #eee
}
<main>
  <section>
    <div>
      <header>
        <h3>heading</h3>
        <p>Some text</p>
      </header>
      <section class="nested">
        <div>
          <article></article>
        </div>
      </section>
    </div>  
  <section>
</main>

Answered by kd patel on November 18, 2021

Shorter Article Option

Removing height: 600px; from the article selector prevents that article from overflowing the parent.

html,body,main {
  height: 100%
}
main {
   display: flex;
   flex-direction: column;
}

main > section {
    min-width: 31%;
    max-width: 74%;
    max-height: 74%;
    padding: 1.27rem;
    background-color: #575757;
}

main > section > div {
  height: 100%;
  max-height: 100%;
}

main section.nested {
  padding: 1rem;
  background-color: #ccc;
}

article {
  background-color: #eee
}
<main>
  <section>
    <div>
      <header>
        <h3>heading</h3>
        <p>Some text</p>
      </header>
      <section class="nested">
        <div>
          <article>Some things in here?</article>
        </div>
      </section>
    </div>  
  </section>
</main>

Taller Section Option

If you want to keep the 600px height of the article then you need to remove max-height: 74%; from the main > section selector.

html,body,main {
  height: 100%
}
main {
   display: flex;
   flex-direction: column;
}

main > section {
    min-width: 31%;
    max-width: 74%;
    padding: 1.27rem;
    background-color: #575757;
}

main > section > div {
  height: 100%;
  max-height: 100%;
}

main section.nested {
  padding: 1rem;
  background-color: #ccc;
}

article {
  background-color: #eee;
  height: 600px;
}
<main>
  <section>
    <div>
      <header>
        <h3>heading</h3>
        <p>Some text</p>
      </header>
      <section class="nested">
        <div>
          <article>Some things in here?</article>
        </div>
      </section>
    </div>  
  </section>
</main>

Answered by camaulay on November 18, 2021

Add your own answers!

Ask a Question

Get help from others!

Recent Answers

Recent Questions

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP