Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Overflow content auto inside overflow hidden?

Tags:

css

overflow

I have a div with height in % and overflow: hidden;. Inside a div with overflow: auto doesn't show scroll when content is big.

Is it posible to do that i want?

Live: http://indorio.ru/inside-box.html (#overlay-box fluid with height of %)

like image 899
skywind Avatar asked Nov 06 '12 11:11

skywind


People also ask

How do I hide content of overflow?

Set the div with a width or height, (otherwise it won't know whether something is overflowing). Then, add the overflow:hidden; CSS property-value pair.

What is the overflow hidden?

overflow: hiddenWith the hidden value, the overflow is clipped, and the rest of the content is hidden: You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.

How do you fix an overflow problem?

To change this, set the min-width or min-height property.” This means that a flex item with a long word won't shrink below its minimum content size. To fix this, we can either use an overflow value other than visible , or we can set min-width: 0 on the flex item.

What is the difference between overflow scroll and overflow auto?

The difference For that, you need overflow: auto , which lets a browser automatically determine if a scroll bar is needed — or not. So in short: overflow: scroll : Always show a scroll bar. overflow: auto : Show a scroll bar when needed.


1 Answers

Overflow requires a height to be specified, otherwise the element will wrap its contents. Depending on your situation you could specify the height as 100%:

#outer {
  height: 400px;
  padding: 10px;
  background: red;
}
#inner {
  height: 75%;
  padding: 10px;
  background: blue;
}
#scroll {
  overflow: auto;
  height: 100%;
  background: green;
}
#content {
  height:400px;
}

http://jsfiddle.net/3xe7k/

like image 107
i_like_robots Avatar answered Sep 19 '22 23:09

i_like_robots