-1

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>

0

4 Answers 4

2
+50

Assuming you cannot modify the original CSS. You can override the size of h1 using a new rule make it have more precedence.
One way to fit both the h1 tags in the container is to make them have equal heights:

/* original rules */

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

.strictContainer {
  height: 150px;
  border: 2px solid gold;
}


/* overrides */

.strictContainer>h1 {
  /* need to override default margins */
  margin: auto 0;
  /* make them have equal heights*/
  height: 50%;
  box-sizing: border-box;
  /* uncomment following to have auto height */
  /*height: auto;*/
}
<div class="strictContainer">
  <h1>Hello</h1>
  <h1>Hello</h1>
</div>


User agents(browsers) put default styles on some html elements. For example, Chrome has following style on h1 tags by default:

h1 {
  display: block;
  font-size: 2em;
  margin-block-start: 0.67em;
  margin-block-end: 0.67em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
}

In order to fit both the tags we need to override margins. I used margin: auto 0;. This means vertical margin is auto and horizontal margin is 0.
We've used box-sizing: border-box; to make borders part of the dimensions. Otherwise we would have to calculate height using height: calc(50% - 4px);


solution 2 You can make the container a flexbox:

/* original rules */

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

.strictContainer {
  height: 150px;
  border: 2px solid gold;
}


/* overrides */

.strictContainer {
  display: flex;
  flex-direction: column;
  justify-content: space-around; /* play with this */
}

.strictContainer>h1 {
  /* need to override default margins */
  margin: 0;
  height: auto;
  flex: 0 0 auto;
  /* for 50% height use this */
  /*flex: 1 0 auto;*/
}
<div class="strictContainer">
  <h1>Hello</h1>
  <h1>Hello</h1>
</div>

Note: In your code snippet you've used 150px height for the container so I've used the same. If your issue is with margins then you can use

0

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>

-1

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

-1

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

1
  • Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
    – Community Bot
    Dec 13, 2021 at 0:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.