0

So, I have two div's, right one containing vertical Chinese text, left one - corresponding English translation:

<div class="row">
    <div class="col-left">
        The Master said, "Is it not pleasant to learn with a constant perseverance and application? Is it not delightful to have friends coming from distant quarters? Is he not a man of complete virtue, who feels no discomposure though men may take no note of him?"
    <div class = "col-right">
        Chinese text is supposed to go here, but StackOverflow blocks posts with too much Chinese characters as spam...
    </div>
</div>

and the following css:

    .row {
        display: flex;
        flex-direction: row;
    }

    .col-left {
        flex: 2;

    }
    .col-right {
        flex: 1;
        writing-mode: vertical-rl; 
        text-orientation: upright;
    }

I want the left one to be as high as necessary to fit the text, while the right one to be only as high as the left one, to achieve the following result:

desired result

Making the layout height match the highest div won't do, this way the vertical text will just run in a single column:

result to be avoided

So it boils down to the following:

  1. Left div stretches as much as needed
  2. Right div's height is set to the left div's
  3. Things don't work the other way around (i.e. the height must seem fixed from the right div's perspective, it mustn't stretch)

It's easy to do with JS, but I wonder if there's a pure CSS solution.

Вова Тихонов
  • 1
  • 1
  • Hi, do you accept using javascript or jquery to fix this? – Moayad .AlMoghrabi May 12 '20 at 22:14
  • I'm aware that it can be done with a couple of lines of JavaScript, even without jQuery, but I'm building the project in Vue.js, so I'd prefer to avoid messing with DOM directly (probably no big deal, thoug). Also, the layout is supposed to be reactive and collapse to a simpler one at 768px, which is easier to do when only CSS is involved. – Вова Тихонов May 13 '20 at 08:57
  • @ZohirSalak not really, in the thread you've mentioned the solution is based on manipulating the overflow. In my case, if I allow the text in the right column to overflow with a scrollbar, it will run as a single column (i.e. single "line" from the vertical text's perspective) instead of wrapping to fill the div. – Вова Тихонов May 13 '20 at 21:46
  • Here's how the solution in that answer works in your case https://jsfiddle.net/cok0rh1g/. What you're asking for is basically Magic, **Left div stretches as much as needed** as much as needed is one line of text extending until there's no more text which will overflow the parent, You have to tell the left div where to stop or assign a certain width for the right div and let the left one fill the renaming space. Scrollbars are inevitable. – Rainbow May 13 '20 at 21:55
  • @ZohirSalak for some reason, when I put in actual Chinese text, it works **exactly** as I wanted with no scrollbars: https://jsfiddle.net/hve09fq8/ !!! – Вова Тихонов May 14 '20 at 20:58
  • Sometimes there [is](https://i.imgur.com/ERMWaOm.png) Sometimes there [isn't](https://i.imgur.com/s2LwmLI.png). It depends on how much viewport width you have because of the flex values – Rainbow May 14 '20 at 21:43
  • In my case there will never be, since I change layout to row-based below widescreen breakpoint. So, problem solved, thank you very much! – Вова Тихонов May 17 '20 at 20:08

0 Answers0