Fit an overflow into parent container - css

Question

In the following example div is larger then section so the section has a visible overflow. I want main to expand and take this overflow so that the text bellow main won't be overlapped. But the size of the section should be kept the same.
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.
Searching for css-only solution replacement of 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.
If you want the full problem, it's needed for one of the incomplete solutions of this question which is here: https://jsfiddle.net/nxy561ze/.

Answer 1

float can help here but I don't think it will help you with your other question:
main {
outline: 1px dotted red;
overflow:auto;
}
section {
width: 8em;
height: 4em;
padding: 1em;
border: 1px solid;
color: blue;
}
section div {
float:left;
}
<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.