InsideDarkWeb.com

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

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

Stack Overflow Asked on November 18, 2021

2 Answers

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!

Related Questions

Can’t use saved information to load into an array

1  Asked on August 13, 2020 by danny

         

How to return pointer adress for structure variable

2  Asked on August 9, 2020 by mystheman

 

Merging two PDF generating views in Django

1  Asked on August 8, 2020 by piethon

       

How do you put a list inside of an object C#?

1  Asked on August 8, 2020 by forrest

     

How to modify this C++ class to be as efficient as C code?

1  Asked on August 7, 2020 by victor-canoz

   

form validation with data ranges

2  Asked on August 7, 2020 by eniol

   

How to format this output?

2  Asked on August 6, 2020 by shantanu-jain

     

uploading csv file django using a form

2  Asked on August 5, 2020 by sheraram_prajapat

       

Set focus to another Control

3  Asked on August 4, 2020 by binu

 

Animate gradient bar chart – matplotlib

1  Asked on August 4, 2020 by jonboy

       

c# error – Can not convert Array to byte array

1  Asked on August 2, 2020 by rakesh

         

Ask a Question

Get help from others!

© 2021 InsideDarkWeb.com. All rights reserved.