'Is there a way to prevent anything overflowing out of an html element through automatically resizing children?

In the example below, is there a way to override the size of the h1 tags so they do not overflow (I do not want to just hide the overflow).

We really want the 'strictContainer' to be 100px of height and not bigger. I searched for an analoguous to size:auto but found nothing.

h1 {
  height: 80px; border:solid black
}

.strictContainer {
  height: 150px; border:solid gold
}
<div class="strictContainer">
  <h1>Hello
    </h1>
    <h1>Hello
    </h1>
</div>
htmlcss


Solution 1:[1]

You can use overflow: hidden to hide any content that may overflow, but I think you are asking for height: min-content.

.container {
  width: 10em;
  padding: 0.5em;
  height: min-content;
  background: peachpuff; 
}
.content {
  height: 5em;
  border: 1px solid red;
}
<div class="container">
  <div class="content">Hello this is some content la la la la la</div>
</div>

Solution 2:[2]

Overflow hidden is used to hide element that overflows

overflow:hidden
/**
other values are visible(default),scroll and auto
ww3schools.com/css/css_overflow.asp 
**/

Solution 3:[3]

/*
 you can remove the default setting  
for box-sizing you can check out the following link 
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*
I highly recommend you to use % or vh/vw instead of px 
It makes your website responsive 
*/
h1 {
  height: 50%;
  border: 2px solid black;
}

.strictContainer {
  height: 150px;
  border: 2px solid gold;
}
<div class="strictContainer">
      <h1>Hello</h1>
      <h1>Hello</h1>
   </div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Jacob
Solution 2
Solution 3 Himanshu Rawat

Related Questions