3

Here is a code snippet showing the problem:

<!Doctype html>
<html>
<head>
    <style>
    .writingMode {
        writing-mode:tb-rl;
        -webkit-writing-mode:vertical-rl;
        writing-mode:vertical-rl;
        border: 5px green solid;
        word-break:break-word;
        overflow:hidden;
        min-height:200px;
        width:100px;
    }
    </style>
</head>
<body>
    <div style="background-color:yellow; height:500px; width:200px; float:left;">
        <div class="writingMode">
                All of these should be the same height pneumonoultramicroscopicsilicavolcaniconiosis
        </div>
    </div>
    <div style="background-color:orange; height:600px; width:200px; float:left;">
        <div class="writingMode">
                pneumonoultramicroscopicsilicavolcaniconiosis
        </div>
    </div>
    <div style="background-color:yellow; height:700px; width:200px; float:left;">
        <div class="writingMode">
                All of these should be the same height pneumonoultramicroscopicsilicavolcaniconiosis pneumonoultramicroscopicsilicavolcaniconiosis pneumonoultramicroscopicsilicavolcaniconiosis
        </div>
    </div>
</body>
</html>

I would like all of the inner divs to be the same height, as dictated by the longest word in them. Instead, they are growing to the height of their parents, with the exception of the middle one in Chrome. Is there a CSS tag I could use to make them grow to the minimum height (above the given min-height) that fits all of the text based on a break-word word wrapping? It seems logical to me that what I have would do that but it isn't.

Edit: The outer Divs (the big yellow and orange ones) should stay different heights, but the inner Divs should all be the same height because their longest words are all the same.

Thanks!

Steven Wojcio
  • 83
  • 1
  • 5

1 Answers1

0

Remove the height form your parent element and the min-height from the children. I made a fiddle. I hope this is what you mean? 

.writingMode {
    writing-mode:tb-rl;
    -webkit-writing-mode:vertical-rl;
    writing-mode:vertical-rl;
    border: 5px green solid;
    word-break:break-word;
    overflow:hidden;
    width:100px;
}
Jan_dh
  • 771
  • 6
  • 14
  • Unfortunately no :( I should have been a little clearer though. I set the outer divs to have differing heights to show the problem a little bit more clearly. I want them to stay as they are and the inner divs to all be the same size (the minimum size required to hold their longest word). If you render it in Chrome, you can see the size of the middle textbox is correct. I need the outer two to match. I'll update the problem. – Steven Wojcio Jul 27 '15 at 23:24
  • When you say the same size, you mean for example, all three of them the same size? Or you mean that the divs just take the size of the words? – Jan_dh Jul 28 '15 at 18:42
  • I mean the divs take the size of their words. After exploring this a little bit more I found that only Chrome has the ability to do what I want, and it looks like a bug they'll need to fix. I resolved my issue with JS by basically setting a width and checking the height over and over again. It's not the best solution but it works. – Steven Wojcio Aug 05 '15 at 15:09