本文介绍了将溢出放入父容器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在下面的示例中，div大于section，因此section具有明显的溢出。我希望main展开并利用此溢出，以便main下面的文本不会重叠。但该部分的大小应保持不变。
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.正在搜索此脚本的仅CSS解决方案替换：
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.如果您想要完整的问题，this question的其中一个不完整的解决方案需要：https://jsfiddle.net/nxy561ze/。
推荐答案
Float在这里可以提供帮助，但我认为它不会帮助您解决其他问题：
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.这篇关于将溢出放入父容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！