Here’s the deal. I have a fixed width div (parent) which is 600px. The child has dynamic content (content each as different width) and the width will vary. Problem is, the child’s width won’t auto past the parent.
How do I get the child div to auto size past the parent?
Simple exampe:
#parent {
width: 600px;
}
<div id="parent">
<div id="child">
</div>
</div>
You can use javascript to:
1) check if the child div’s new width > 600
2) set parent width = child width
|
You can use javascript to:
1) check if the child div’s new width > 600 |
No no no…
I am essentially making a scroll box.
Parent has overflow: hidden.
Parent is fixed to 600px.
I want the child to dynamically be full width even if that means surpassing the parent.
Currently, the child div wraps at 600px and the height is increased for more rows of the dynamic elements inside it.
Creating a scroll function in javascript, I have no idea where the ‘end’ of the child div width wise is. The child div also looks ugly inside its parent as if a child’s element can’t fully fit it gets wrapped to the next line. This leaves big empty spaces in parent div rather than cut off content which I’d prefer.
|
You could use positioning, but then that might screw you up on the height; you’d have to use margins or something to ensure elements aren’t improperly stacking on each other. You can also use overflow to create scrollbars on the child (if this is a code block or something). Or you can use white-space:nowrap or make heavy use of if you don’t want text to wrap (though I think the hidden overflow on the div’s parent element might put a damper on things).
Just some ideas. Play around with stuff mang. |
white-space: nowrap; did it
I can now use JS to calculate its true size, and overflow is hidden.