overflow="hidden" clips the wrong element(s)

[amcaplan]

In this code sample, I'd expect lines 1 and 2 to appear.

import React from 'react';
import {render, Box, Text} from '../../src/index.js';

function IncorrectClipping() {
    return (
        <Box height={2} width={10} flexDirection="column" overflow="hidden">
            <Box height={1} width={15}>
                <Text>Line 1 is very long.</Text>
            </Box>
            <Box height={1} width={15}>
                <Text>Line 2 is also very long.</Text>
            </Box>
            <Box height={1} width={15}>
                <Text>Line 3 should be invisible.</Text>
            </Box>
        </Box>
    );
}

render(<IncorrectClipping />);

Instead, they are rendered as:

Line 1 is
Line 3 sho

If you add more lines to the sample, it continues to render one of the lower lines rather than the expected overflow line being cut off. And eventually it starts from a lower line, too. With 9 lines, for example, it renders lines 3 and 7.

import React from 'react';
import {render, Box, Text} from '../../src/index.js';

function IncorrectClipping() {
    return (
        <Box height={2} width={10} flexDirection="column" overflow="hidden">
            <Box height={1} width={15}>
                <Text>Line 1 is very long.</Text>
            </Box>
            <Box height={1} width={15}>
                <Text>Line 2 is also very long.</Text>
            </Box>
            <Box height={1} width={15}>
                <Text>Line 3 should be invisible.</Text>
            </Box>
            <Box height={1} width={15}>
                <Text>Line 4, doubly so.</Text>
            </Box>
            <Box height={1} width={15}>
                <Text>Line 5, absolutely.</Text>
            </Box>
            <Box height={1} width={15}>
                <Text>Line 6, even more.</Text>
            </Box>
            <Box height={1} width={15}>
                <Text>Line 7, indubitably.</Text>
            </Box>
            <Box height={1} width={15}>
                <Text>Line 8, without fail.</Text>
            </Box>
            <Box height={1} width={15}>
                <Text>Line 9, yup.</Text>
            </Box>
        </Box>
    );
}

render(<IncorrectClipping />);

Line 3 sho
Line 7, ev

[jeroenptrs]

Seeing this too, if you want to clip a content box with overflow="hidden" it gets all kinds of weird.

Edit: actively seeing this strange behaviour without overflow as well, just big chunks of text (also rendering each line in its own box + text component) creates a whole lot of weirdness

https://github.com/vadimdemedes/ink/assets/19305608/d3effb0d-cc34-4755-a267-1bc504b62015

Just rendering a big string immediately solves that issue for me, but it's still weird behaviour (and doesn't solve what I'm trying to do)