FlexView макет накладывающихся панелей

Question

У меня есть React SPA, использующий FlexView для макета с меню слева и рабочей панелью справа. Некоторые экраны справа «лежат» на панели меню. Я не могу понять, почему.

Я попытался использовать flexWrap: "nowrap", чтобы 2 элемента Paper, отображающие правильный рабочий FlexView, не отображались в строке, т. Е. Чтобы они были уже, но это, кажется, игнорируется или переопределяется. Это, похоже, не является актуальной проблемой, но это отдельная проблема. У меня есть другое рабочее представление, которое также скрывает меню, когда ширина окна браузера уменьшается.

Код был написан кем-то другим, поэтому я пытаюсь разобраться с ним.

Мне нужно, чтобы меню всегда оставалось одинаковой ширины. Это TreeView и должен иметь полосу прокрутки, если дерево становится слишком глубоким или слишком длинным.

Рабочий вид справа должен иметь минимальную ширину, после чего он получает собственную горизонтальную полосу прокрутки.

Кроме того, я хотел бы понять, почему директива столбца для контейнера FlexView для объектов 2 Paper игнорируется.

Мне было бы интересно узнать, существует ли систематический способ отслеживания этих ошибок компоновки, это усложняется.

Это левый и правый столбцы, содержащие меню и заменяемые компоненты, выбранные на основе выбранного меню.

        const ready = (
            <div className="allWrap">
                <div className="leftColumn" style={{ height: this.height }}>
                    <div>
                        <DragLayer snapToGrid={false}/>
                        {/* objects to drag from */}
                        <div className="heading">Drag into the tree below to add item</div>
                        {['Item Type1', 'Item Type2', 'Item Type3', 'Item Type4', 'Item Type5', 'Item Type6',
                            'Item Type7', 'Item Type8', 'Item Type9'].map(
                            item => (
                                <AddItemLabel
                                    key={item + 'AddLabel'}
                                    label={item === 'Photo' ? 'Layout Photo' : item} type={item}
                                />)
                        )}
                        <ImportDelete/>
                    </div>
                    {/*  here the main tree begins */}
                    <List
                        className="listItem listItems"
                        style={{
                            overflowY: 'scroll',
                            flex: 1,
                            display: 'flex',
                            flexDirection: 'column',
                            paddingRight: 30
                        }}
                    >
                        {
                            // there are 2 categories of things
                            ['current', 'archived'].map(
                                category => (
                                    <Category
                                        key={`${category}thing`}
                                        projects={this.props.data[category]}
                                        label={category[0].toUpperCase() + category.substr(1) + ' Things'}
                                        archived={category === 'archived'}
                                    />
                                )
                            )
                        }
                    </List>
                </div>
                <div className="rightColumn">
                    <div className="banner">
                        <img
                            style={{ alignSelf: 'center' }}
                            src={require('../../Assets/logo_1080x361 copy.svg')}
                            alt={"Image"}
                        />
                    </div>
                    <div className="view" style={{ padding: '0px', flex: 1 }}>
                        {/* the main view component, we pass clicked element and its content from the state */}
                        <ComponentView/>
                    </div>
                </div>
            </div>

Вот соответствующие классы CSS

.allWrap {
    display: flex;
    flex: 1;
    flex-direction: row;
    justify-content: space-around;
}
.leftColumn {
    flex: 1;
    font-size: 0.9em !important;

    width: 25%;
}
.rightColumn {
    flex: 3 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 75%;
}
.banner {
    display: flex;
    height: 100px;
    flex-direction: column;
    align-content: center;
    justify-content: center;

    font-family: 'Roboto Mono', monospace;
    font-size: 3em;
}
.view {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-content: stretch!important;
    align-items: stretch!important;
    justify-content: flex-start;
}

ComponentView - это панель, лежащая в основе меню

Компонент, который выстраивает модный ряд, когда он должен быть столбцом, равен

        return (
            <FlexView className="container" column width="100%" height="100%">
                <Paper className={classNames(classes.root, "observation")} elevation={4}>
                    <FlexView className="obsRowThin"/>
                    <FlexView className="obsRowColour" style={{ justifyContent: 'space-between' }}>

...

                    <FlexView className="obsRowThinInvis"/>
                </Paper>
                <Paper
                    className={classNames(classes.root, "observation")
                    }
                    elevation={4}>
                    <FlexView
                        className="obsRowThin"/>

...

                </Paper>

вот соответствующие классы CSS, большинство из них являются именами классов JedWatson lib

    container: {
        display: 'flex',
        flexWrap: 'nowrap',
        width: '100%'
    }

Нет сообщений об ошибках, просто неправильный макет