I have a parent element with some child elements. The child elements have a min-width set, but the parent does not. When the browser window is smaller than the min-width, the child elements are the correct width, but the parent keeps getting smaller, causing the children to overflow. Is it possible to force the parent to be at least as wide as the children? (without using javascript)
http://jsfiddle.net/Psczr/
(drag divider most of the way to the right and then scroll right in the result window)
Set the min-width on the parent and on the child inherit ... but the parent of the td in your script is not the div but the tr ... the parent of the tr is the table ... and the parent of the table is the div.
http://jsfiddle.net/Psczr/12/
Your issue in this situation is that you're using a relative width for the parent and a fixed min width for the children. The solution you're trying to handle is not possible in straight CSS. You should instead use relative widths for all elements or establish a fixed min width for the parent.
Related
In the image above, list of blocks has a maximum height with overflow-y: scoll. However, when the more icon is clicked, I want the dropdown to come over everything and ignore the max height of parent div.
Is it possible with css?
Your popup is likely an absolutely positioned element, and absolutely positioned elements are children to their nearest non-static (relative or absolute) positioned parent. If that parent has an overflow: hidden/scroll/whatever style on it it's going to cut off the child element regardless of what you set the child's z-index to.
You need to remove position: relative/absolute from the scrollable parent div and put it on the next grandparent div, then the child element won't be affected by the parent div's overflow style, however you may have to change your positioning calculations for the child if its parent has changed.
Relevant article here.
I have a collapsible panel that was designed in a way that the children (green) are wider than their parent (red). Because there children have borders and there are icons added via ::before and ::after, when the whole panel collapses it borders on the children stay large until the animation on the parent is completed.
I can avoid these annoying lines from staying on the screen if I change the parent's overflow to hidden, unfortunately doing this clips the styling on the children and we don't get to see the elements the way they were intended.
Is there a way to keep the parent with overflow hidden and allow the children to have a width that exceeds the width of the parent? any tricks?
It looks like you are collapsing it horizontally and the problem is that the elements keep adjusting to the new width until the width stops transitioning to the new value.
If that is correct, you might need to change from using width to collapse the panel to transform: scaleX(0);. It should take care of child elements re-rendering and elements being visible after the width is zero.
Is it a good practice to give children of a container their individual heights even if the parent container already has a height property and if not is there any way of passing the parent containers height to some of its children without using
height: inherit;
I dont want to write individually to all children this property.
if you use a css precompiler you can save the height of the container to a variable and then define it for the specific child container as its individual Height. Your Question is not very clear because you don't describe how your child-container are positioned in the parent container
If I have a div element with CSS height set to auto, and all its content height was set to percentage values, then where does the contents of that div based their reference for the height?
Ordinarily, the contents set their height as if they were set to "auto" rather than percentage values.
See under "<percentage>" at http://www.w3.org/TR/CSS2/visudet.html#the-height-property for the full details.
i think inherited css attribute will be based on their direct parent container.
just as a position:absolute element's top,bottom,left,right value will be based on its' direct parent container , instead of root container.
In CSS, if I set the width attribute to 100%, like so:
width: 100%;
If the width of the document is larger than the width of the window (horizontal scrolling), the width of the element is only the width of the window. If I scroll to the right, it gets cut off immediately.
How can I use CSS to set the width of the element to have a min-width of the document width so it doesn't get cut off when scrolling?
Percentage based width is dependent on the width of the parent element. So if you set width 50%, it will be 50% of the parent container. Therefore you need to ensure that all the parent elements are properly sized.
There may be a solution using absolutely positioned elements. However this depends on the position attributes of the parents as well.
There is no construct to get the "document width" on a page (in pure css). You are constrained by parent elements in nearly any case.
However a solution may be achieved with Javascript.
I would suggest you investigate the size of the chain of parent elements with Firebug or another browser debugger.