lightning-dual-listbox selected column occassionally goes missing in a modal

Question

I have a lightning-dual-listbox presented in a modal and occasionally the right-hand "selected" column does not render in Chrome or Safari as shown here:

Refreshing the page generally fixes the problem.

Using the browser Developer Tools shows that the element is in the DOM but has not been recognised by the browser as a flex item indicated by the missing third flex button here:

compared with this working example where the third flex button is present:

If you have seen this and have found a work-around let me know.

PS

Rather too much markup and code to post all of it here, but as there is aquite a lot of dynamic content:

    <lightning-dual-listbox
        if:true={modalShowTabs}
        name="cx1__Tabs__c"
        label="Tabs"
        source-label="Available"
        selected-label="Selected"
        options={tabOptions}
        value={defaultTabValues}
        onchange={handleFieldChange}
        disable-reordering="true"
        required
        size="4"
        class="slds-p-top_small slds-p-bottom_small validateable"
    ></lightning-dual-listbox>

the last (unsuccessful) attempt to solve was this:

// This is being called a lot because the right-hand "Selected" box wasn't always rendering
// and this assumes that might have been related to late arrival of async data.
// This way, the component is re-created when the modal opens.
// But hard to test and be sure as only a problem from time to time.
rerenderModalTabsField() {
    this.modalShowTabs = false;
    window.setTimeout(() => this.modalShowTabs = true, 0);
}

PPS

I see this in the failing case:

div.slds-dueling-list__column:last-child {
    display: none !important;
}

and unchecking the style fixes the problem. Will try to figure where this comes from.

Answer 1

OK found the problem.

This is a code base inherited from a separate company and they saw fit to add this (wow):

div.slds-dueling-list__column:last-child {
    display: none !important;
}

to a style sheet that gets pulled in by some components as part of an effort to make part of the UI more colorful. (How this is achieved is quite convoluted and not something to copy.)

Hence when you navigate to some code that loads this custom style sheet and then come back to the component where I'm having the problem, the CSS is respected and the last column is not displayed.