If i don't hardcode <div> height component inside is hidden

Question

I like to make a div expand according to its content height but the hole Component inside that div is hidden if I use like height: '100%'. It's a bit complex and wish for some extra eyes!

I made a CodeSandbox

Looks like this in Chrome:

I can see during debug that the "hidden" Component is rendering ok so it's strange that it's "hidden"

If I set the same Style to height: 1000 the <ul> have Children:

But I want it to expand according to its content height so height: 1000 will not work.

In this CodeSandbox I set the height: 1000, to demonstrate what happens. The Component that refuse to expand height is a Masonry image gallery Component

style={{
    width,
    height: 1000,
    position: 'relative',
    margin: '0 auto',
}}

When you open the Sandbox you see in the left editor windows this TimeLineViewer.js and the Style code problem. The TimeLineViewer.js loads the Masonry image gallery Component Masonry.js

What I have tried is to set parent to also 100% height but with no luck.. I'm a little bit new to JavaScript and HTML so advice would be good

Answer 1

To debug this, start by taking off or commenting out the LeComponent and then testing your div actual height when you are implementing the 100% height.

<div
    style={{
        width,
        height: !fullscreen && "100%",
        position: fullscreen ? 'initial' : 'relative',
        margin: '0 auto',
    }}
>
    {/* <LeComponent
        infinite
        items={items}
        itemRenderer={ItemRenderer}
        gutter={gutter}
        outerGutter={outerGutter}
        extraPx={0}
        debug={debug}
        rows={{
            0: 1,
            320: 2,
            480: 3,
            640: 4,
        }}
        cols={{
            0: 1,
            360: 2,
            640: 2,
            960: 3,
            1280: 4,
            1400: 5,
            1720: 6,
            2040: 7,
            2360: 8,
        }}
        onEnd={() => {
            // TODO possible when many items lazy load them
            // this.addItems();
        }}
    /> */}
</div>

You will notice, that it still takes up no height at all and the component you created did not have any bearing to that. This is because it is a CSS issue. The height percentage cannot be determined because there is no parent or ancestor with a height definition. You are getting the percentage of void.

After that, we can take a glance at your Masonry component. Just by looking at the method identifiers (such as _getDimensions, _setContainerHeight) and further reviewing the code base, we can learn that this component is actually dependent on certain element dimensions (most likely the parent div dimension as well) - and from what we learned from the CSS issue awhile ago, the parent div actually has a height of 0.

At this point, I took out the style props on your Masonry Component so that it would not be dependent on the parent dimensions and that fixed the issue

<div ref={this.container}>
    <ul ref={this.list}>
        {mounted && items.map((item, index) => this.renderItem({ index, item, maxIndex }))}
    </ul>
</div>