将溢出放入父容器

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 which is here: 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.

将溢出放入父容器

Fit an overflow into parent container

css

overflow