I have a div set with overflow:auto and also height: auto. The div contains text data and a big image.
I have verified using firebug these attributes are being applied fine, but still scrollbar appears vertically. I will like div to expand automatically to required height.
Related
I want to make element scrollable if it's content is becoming too large to fit in parent's max-height. The problem is that it overflows parent instead of adding scrollbar.
I know that providing height or max-height in pixels to element would fix the issue but I cannot do that because the height of the element is not known.
Link to the code: https://codesandbox.io/s/scrollable-height-ewfbmo?file=/src/App.js
(I want purple section to be scrollable)
So to scroll the purple region:
Just add overflow: auto to the .body class (the parent of the purple region)
I forked your code-sandbox:
https://codesandbox.io/s/scrollable-height-forked-9hvrpy?file=/src/styles.css
How to add scroll to a block element?
I've used overflow-y: scroll, but it immediately creates a scrollbar. I want scrolling after my div has reached a specific height.
You should use overflow-y: auto to get scroll after fulfilling the height of an element.
auto Depends on the user agent. If content fits inside the padding box, it looks the same as visible, but still establishes a new block-formatting context. Desktop browsers provide scrollbars if content overflows. - MDN
Whereas scroll Content is clipped if necessary to fit vertically in the padding box. Browsers display scrollbars whether or not any content is actually clipped. (This prevents scrollbars from appearing or disappearing when the content changes.) Printers may still print overflowing content. - MDN
First you have to give a proper height and width of your content area where you have to overflow.
You have a <div> which has more content than your area than you can use overflow tag with scroll.....
width: #;
height: #;
overflow: scroll;
I have a fixed DIV container size : 375px * 667px for phone. How this DIV and all element inside (img,text,etc) will auto enlarge when user using a desktop browser?
original fixed div
auto enlarge
The trick would be to add height: 100% to all elements in the dom-tree that are around the div that needs to be 100% of height.
Don't forget the body, tag, as for most browsers, your body is not bigger as the content in it.
Some browsers even need to have it set on the HTML-tag.
I have an absolutely positioned div, with overflow:auto.
When it overflows vertically, a vertical scrollbar appears. This appears within my div (even though it isn't fixed width), which shrinks the space available to the div's contents. In my case, it causes the text to wrap unnecessarily, which is undesirable.
See https://jsfiddle.net/hktgcrj0/ - shrink the page until the div overflows and the scroll bar appears - you will see the text wrap.
Is there any way to make the scrollbar appear outside of the div, or increase the width of the div to accommodate the scroll bar?
Note that for my application (the fiddle is massively simplified) giving the div a fixed width is not an option, and disabling text wrapping is also not an option.
Try adding:
div {
white-space: nowrap;
}
or wrap the inner elements in <p> tags and apply white-space: nowrap; to that.
We've a problem in a website with Microsoft Edge. Some vertical scrollbars are visible in the .ic3-report-content-container. Check website here
The CSS is:
.ic3-report-content-container {
height: 100%;
overflow:auto;
}
How is it possible that, with a height of 100%, Edge is showing a vertical overflow?
The containers div - parent .ic3-report-editor - has the correct height. Somehow the height of this div is smaller (no borders, no padding, no margins...)
Removing the overflow or putting overflow-x:auto; and overflow-y:hidden; fixes the issue. Is this normal, or an Edge bug?
The inner content of the div.ic3-report-content-container exceeds the boundaries of the box, so simply add:
.ic3-report-content-container {overflow: hidden;}
to get rid of the scroll.