overflow-x: hidden; overflow-y: inherit

Question

I have a div (id="c_content) which I want to expand vertically depending on how long the content is without displaying the contents which overflow horizontally.
I am using the following code at the moment and it doesn't seem to work:-

#c_content {
        min-height: 645px;
        max-height: 2000px;
    overflow-y: inherit; overflow-x: hidden;
}

When I use the above code, the content which overflows vertically is hidden. What should happen is, the div should expand vertically in order to show the content. But that doesn't seem to happen.

edit: when I set overflow-y: visible; instead of overflow-y: inherit;, I get a scroll bar for y axis (http://prntscr.com/108wsm) - still not what I wanted.

I would like to know if there is any way to fix this even if I have to user another code like Java or Jquery

Are you implementing any jQuery code, if you are, can you please post it in an edit? — adaam
– adaam, Commented Apr 12, 2013 at 3:32
Try setting up a JSFiddle that replicates your problem -- that way we could experiment — jnpdx
– jnpdx, Commented Apr 12, 2013 at 3:35

razahassank · Accepted Answer · 2013-04-12 04:17:30Z

1

Use cross browser min-height trick .. It will expand div when necessary.

#c_content { 
   min-height: 645px; 
   height:auto !important; 
   height: 645px;
   max-height:2000px;
}

answered Apr 12, 2013 at 4:17

razahassank

1958 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

DaveB · Accepted Answer · 2013-04-12 03:45:26Z

0

inherit is not a valid value for the overflow-y property. Try setting it to overflow-y:visible;

answered Apr 12, 2013 at 3:45

DaveB

9,5584 gold badges43 silver badges68 bronze badges

Collectives™ on Stack Overflow

overflow-x: hidden; overflow-y: inherit

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related