Menu
<div id="parent">
<div id="child">
content...
</div>
</div>
Is it possible to make #child as wide as the content is? Making it wider than #parent, which has a fixed width, if needed.
(in my case content is an unknown text string that I don't want to line break)
225
Its width will be worked out based on the pixel width of its content and will be calculated after the contents are rendered. So at the point, IE encounters and renders your relatively positioned div its parent has a width of 0 hence why it itself collapses to 0.
width:inherit inherits width that defined by parent. This makes child width 25%, but if I redefine it with width:100% it will define width of child 50%.
The max-content sizing keyword represents the intrinsic maximum width or height of the content. For text content this means that the content will not wrap at all even if it causes overflows.
You can set display:inline and white-space:nowrap on your #child, which will give you the results you're desiring. The container will only be as wide as the content within, and will exceed the width of the parent if necessary.
Demo: http://jsbin.com/ebuxup/edit#html,live
129
Try with this CSS to avoid line break at all #child { white-space: nowrap; }.
Infos here: http://www.w3schools.com/cssref/pr_text_white-space.asp
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
