Within this scenario, the div element is larger than the section, causing visible overflow in the section. The objective is for the main to expand and absorb this overflow so that the text below the main remains unobscured. However, it is crucial to maintain the size of the section.
main {
outline: 1px dotted red;
}
section {
width: 8em;
height: 4em;
padding: 1em;
border: 1px solid;
color: blue;
}<main>
<section>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam quos amet impedit esse veritatis quia omnis.</div>
</section>
</main>
Some text goes here and gets crossed by an overflow.Looking for a CSS-only solution to replace this script:
var main = document.querySelector('main')
var sectionBB = document.querySelector('section').getBoundingClientRect()
var divBB = document.querySelector('div').getBoundingClientRect()
main.style.minHeight = divBB.bottom - sectionBB.top + 'px'main {
outline: 1px dotted red;
}
section {
width: 8em;
height: 4em;
padding: 1em;
border: 1px solid;
color: blue;
}<main>
<section>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam quos amet impedit esse veritatis quia omnis.</div>
</section>
</main>
Some text goes here and gets crossed by an overflow.To fully grasp the issue, it is a requirement for one of the incomplete solutions in this question which can be found at: https://jsfiddle.net/nxy561ze/.