Break letters of second child div

Question

I have one requirement, where I need to apply width to the parent element which is equal to the first child element\'s width. This can be easily achieved using display

Answer 1

You can Achieve this easily with CSS3's new intrinsic and extrinsic width values(min-content in this cas), although, it's not supported on IE, so it's not an viable option but I will just post this as it's interesting that we will be able to do that in the future:

http://jsfiddle.net/S87nE/

HTML:

    
first
    
valuevaluevalue

CSS:

.main {
    background-color: cornflowerblue;
    width: -moz-min-content;
    width: -webkit-min-content;
    width: min-content;
}
.first {
    width: 50px;    /* I don't know this width */
    height: 50px;    /* I don't know this height */
    background-color: grey;
}

.value{
    word-break: break-all;
}

---

I guess in the worst case you could use this for newer browsers and JS for IE and older versions.

Reference:

• http://dev.w3.org/csswg/css-sizing/#width-height-keywords
• http://demosthenes.info/blog/662/Design-From-the-Inside-Out-With-CSS-MinContent