css - 将溢出放入父容器

Question

在下面的例子中，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/ .

Answer 1

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.