将溢出放入父容器

编程基础网前端问题

2022-01-01

Fit an overflow into parent container(将溢出放入父容器)

本文介绍了将溢出放入父容器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

这篇关于将溢出放入父容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

编程基础网

本文标题为：将溢出放入父容器