CODEWITHSUNDEEP
htmlcssinternet-explorer-8ie8-compatibility-mode
IMTheNachoMan
IMTheNachoMan

Reputation: 5821

100% height for div inside another div with margins

I have a div inside a div. The CSS/HTML is below. I am trying to figure out how to make the inner div have true height: 100%; with no overflow and what not. No matter what I try the border of the inner div gets cropped because of the outer div's overflow: hidden.

For reasons I cannot modify the content or style of either divs. I can, however, wrap the inner div in other divs if needed. This is not done through JavaScript which is why I cannot modify the outer or inner divs.

Also, this has to work in IE8.

The outer div style won't change much -- only the width, height, background-color, and margin.

The inner div could be anything. It could have a bigger border, it could have no border, it could be who knows what.

#outer
{
	width: 200px;
	height: 200px;
	background-color: yellow;
	margin: 20px;
	overflow: hidden;
	position: absolute;
}

#wrapper
{
  height: 100%;
}

#inner
{
	border: 1px solid red;
	height: 100%;
}
<div id="outer">
	<div id="wrapper">
		<div id="inner">
			a
		</div>
	</div>
</div>

Upvotes: 0

Views: 6233

Answers (2)

Krish
Krish

Reputation: 2670

You can use css flex property for #wrapper

#wrapper {
    display: flex;
    flex-flow: column;
    height: 100%;
}


#outer
{
	width: 200px;
	height: 200px;
	background-color: yellow;
	margin: 20px;
	overflow: hidden;
	position: absolute;
}

#wrapper /* adding flex */
{
  display: flex;
flex-flow: column;
height: 100%;
}

#inner
{
	border: 1px solid red;
	height: 100%;
}
<div id="outer">
	<div id="wrapper">
		<div id="inner">
			a
		</div>
	</div>
</div>

it will work on all latest browser but this won't work on IE8.

Upvotes: 6

THCoder
THCoder

Reputation: 132

jsfiddle

change the #wrapper height to only 99% will solve the problem.

The reason why the inner is getting cut off because:

#inner {
    height: 100%; //this means it equals to 200px
    border: 1px solid red;  //1px at the top border and 1px at the bottom added to the height of the #inner so now it becomes 202px, which will get cut off by overflow:hidden
}

Upvotes: 0

Related Questions