In THIS scenario, I don't want the last .child's .hang to add up to the height and incur additional scroll. I want it to protrude outside .parent instead, on scroll.
How can I achieve this?
If you want the parent to stay the size you have it, but you want the last child to have a smaller hang, you can use the css pseudo-class selector :last-child.
It sounds like you want to change the overflow-y of the child class that is the last child of its parent. If you change it to :hidden, it should do what you are expecting.
.child:last-child {
overflow-y: hidden;
}
See this JS-Bin for an example.
EDIT
In response to the modification of the question, I see that you want to have the .hang protrude outside of the .parent object. If I'm understanding your desired look correctly, you have a .hang as a child of .child, which itself is a child of .parent, and you want the overhang from .hang to protrude outside of the outer .parent object.
Unfortunately, I do not believe this exact behavior is possible. Once you use overflow-y: scroll, then any part of any child that extends beyond the bounds of the container is truncated, and you have to scroll it into view.
If I understand what you want, you can change:
overflow-y: scroll;
to:
overflow-y: visible;
That'll flow the .hangs ouside the .parent without a scrollbar.
Related
I have a container div (modal) that is set to position: fixed (absolute is not an option for my purpose). Inside of this container I have two columns. One of these columns contains tab buttons with below them some content or a form. This content (only the content, not the tabs) should be scrollable but I can't figure out how.
The height of the tabs can change so the solution can't contain a fixed height for the tab bar.
I've tried to make the whole column scrollable first by setting the column to position: relative, min-height: 100% and overflow-y: scroll but this first try didn't even work.
Codepen with basic setup
EDIT
Not a duplicate of How to make child div scrollable when it exceeds parent height?
I'm working inside a fixed container
I'm working with flexible heights
Trying to achieve a css only solution
This issue is occurring because you are not declaring "max-height" to container ".details-column".
Try below CSS :
.content{
max-height: 400px;
overflow-y: auto;
}
Note: You have to set fixed height or fixed max-height of the container otherwise container won't know when it has to scroll data.
Excerpt from W3School:
The overflow property only works for block elements with a specified
height.
but since you've flexible height element doesn't know when to overflow as it will just keep on growing.
you'll most likely have to define a height or max-height or even use JS to calculate height, other suggestion i can make is to play around with white-space property as well as calc() for height.
Edit:
Here is a very good source to help you understand overflows: https://www.brunildo.org/test/Overflowxy2.html
Good Luck.
By applying following css your div will be scrollable.
.content{
height: 80%;
overflow-y: auto;
}
this is because there is not much content to make it scroll.. put some content and try.. check below link
overflow-y: auto
add this to the modal class. thanks
https://codepen.io/Xenio/pen/mvbpJV99
I have a div in my HTML page that has overflow-y: scroll;, and this appears to work just fine.
But when I add content to this scrollable child, my page's body increases in height such that now the whole page is scrollable. But scrolling the page down shows empty background-color space.
It's as if the body is allocating space for the content inside the scrollable child, despite the child being scrollable and thus not requiring the body to allocate this space.
Is there a style property that causes this, and is there a style property (or removal of a property) that can fix it?
EDIT:
As a clue, my scrollable child element has display: flex;, and when I change it to display: block;, the new position it has extends exactly to the bottom of the extra space the body has. So it's as if the body is behaving as if the child div has display: block;, ignoring the it's actual display value.
As i understand it, you have a child element inside of a parent element. You want the child element to be scrollable, but the parent element to not be. Is that right?
In many cases, only adding overflow-y: scroll; to the child element might not be enough.
Try adding overflow-y: hidden; to the parent element, and also set a max-height to your child element.
That should fix the issue.
Cheers :)
I have two divs with fixed width placed next to each other in a parent div. I want to prevent the two divs to be placed under another if the parents' width becomes smaller than the childrens combinded width. They should stay next to each other, and overflow the parent.
See this fiddle
As you can see I want the two children to overlap with relative positioning. This leaves a lot of blank space in the parent that I want to eliminate.
Because I want the height of the parent to adapt to the tallest child (assume that the height changes and is not fix) I can not use float or position: absolute; which makes it tricky.
I am out of ideas. Any suggestions?
I would like the solution to include at least IE8.
If I understand the question correctly, just add the property "white-space: nowrap;" to the parent element.
See this fiddle: http://jsfiddle.net/qk0qrj54/2/
#parent {
background-color: yellow;
width: 380px;
white-space: nowrap;
}
http://216.194.172.101/~culinare/index.php/terms-conditions-and-policies
The problem I'm having is pretty clear. The DIV that shows the gray box with the T&C stretches beyond the parent DIV that contains it. I've tried a number of variations in the CSS, and none of it seems to work. What am I missing?
Floating elements doesn't affect the size of the parent element. You can however make the parent contains the floating elements also, by using the overflow style:
.body_content { overflow: hidden; }
As the parent element doesn't have a specific height, the overflow style won't actually hide anything, it will just have the effect on the floating elements inside it.
The div with the class .body_wrapper has left: right.
So you have to do the next:
.body_content {
/* other styles */
display: table;
}
I am trying to get an<img> to resize dynamically. Sometimes I need that image to go beyond the box it is bound by, but it seems to stop and distort. Can this be done?
<div>
<img src='smjpg.jpg' />
</div>
div{
width: 20px;
}
img{
width: 100px;
}
Just use CSS for the bounding div.
#imgDiv {
overflow:visible;
}
If you still want the parent container to grow for other elements, with no fixed size, then consider using the float property or position: absolute on the child element. Absolute positioning removes the child from the flow of the page, so the parent container will see nothing to expand around. Floating has a similar visual effect, provided overflow is visible and no clearfix is used, but the child does affect the layout of its siblings. Here's a demo: http://jsfiddle.net/lpd_/rd4HP/3/ (try adjusting the result width).