CODEWITHSUNDEEP
cssoverflow
Qwertiy
Qwertiy

Reputation: 21410

Fit an overflow into parent container

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/.

Upvotes: 3

Views: 129

Answers (1)

Temani Afif
Temani Afif

Reputation: 273031

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.

Upvotes: 1

Related Questions