Panes overlap when window smaller than min-width

[jbonnett92]

Hi, The panes overlap when the window is resized smaller than the min-width.

Any way you can update the code to prevent this?

UPDATE: It turns out it's to do with the rightmost panel having content that is larger than the one to the left. Sorry about the quality. I still have no fix.

Thank you, Jamie

[liquidvisual]

@jbonnett92 I've run into a similar issue where a pane will not respect overflow: auto - so instead of invoking scrollbars when the pane gets too small for the content, it just "snaps" back.

Did you manage to find a solution or an alternate library for your purpose?

[jbonnett92]

@liquidvisual Unfortunately I haven't.

[liquidvisual]

@jbonnett92 I just discovered a fix (for my situation) - I was able to invoke scrollbars by making the panel content wrapper absolute. Hope this can be of use to you somehow:

<!-- MULTIPANE -->
<multipane class="multipane w-100 h-100" layout="vertical">
    <div class="pane" :style="{ minWidth: '200px', width: '200px' }">
        ...
    </div>
    <multipane-resizer></multipane-resizer>
    <div class="pane" :style="{ flexGrow: 1 }">
        <div style="position: absolute;">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation.</p>
        </div>
    </div>
</multipane>

[jbonnett92]

@liquidvisual Thank you I'll give it a try in a little bit :) I'll let you know if it works.

[jbonnett92]

@liquidvisual My panes just seem to overlap.

[liquidvisual]

Sorry to hear that. What happens if your panes have an overflow of auto?

Originally I was looking into this library since it was based on what looks to be the most popular JS one, "Split.js" - although I wasn't able to figure out how to implement it in Vue based on the examples :/

[jbonnett92]

I think it has to do with the rightmost pane being flexbox.