Html 一行中设置的Flex重叠2个子Flex布局类

我有两个css类leftColumn和rightColumn排列在一个行布局中，用于一个SPA。问题是，当浏览器变窄时，右栏位于左栏的“下方”，遮挡了其中的元素

leftColumn覆盖rightColumn

代码如下：

            <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>
...etc
            </div>
            <div className="rightColumn">
                <div className="banner" style={{ minWidth: '570px' }}>
                    <img
                        style={{ alignSelf: 'center' }}
                        src={require('../../Assets/logo_1080x361 copy.svg')}
                        alt={"Logo"}
                    />
                </div>
                <div className="view" style={{ padding: '0px', flex: 1, minWidth: '570px' }}>
                    {/* the main view component, we pass clicked element and its content from the state */}
                    <ComponentView/>
                </div>
            </div>

你知道我该怎么解决这个问题吗？我已经尝试了许多flex设置的组合，没有任何影响

---

我需要的是让leftColumn和rightColumn在浏览器窗口缩小宽度的情况下按宽度缩小，每个缩小到最小大小，然后获得每个gets水平滚动条，这是您需要的，请尝试将其设置为nowrap

.allWrap {
    display: flex;
    flex: 1;
    flex-direction: row;
    align-items: flex-start;
    min-width: 830px;

    justify-content: space-around;
    overflow: hidden;
    flex-wrap: nowrap;

}

---

flex wrap是您需要的，请尝试将其设置为nowrap

.allWrap {
    display: flex;
    flex: 1;
    flex-direction: row;
    align-items: flex-start;
    min-width: 830px;

    justify-content: space-around;
    overflow: hidden;
    flex-wrap: nowrap;

}

---

最后，在尝试了许多组合后，我无法让flexbox进行布局。所以尝试显示：网格。如果灵活性较差，则更易于控制

以下是几乎最后的款式：

.allWrap {
    display: grid;
    grid-template-columns: [menu] 270px [inspect] auto;
    grid-template-rows: 100%;

    min-width: 830px;

    overflow: hidden;
}

.leftColumn {
    grid-column-start: menu;
    grid-column-end: inspect;
    grid-row-start: 1;
    grid-row-end: 2; 
    display: grid;
    position: fixed;
    left: 0;
    top: 0;
    font-size: 0.9em !important;

    width: 20%;
    min-width: 270px;
    background-color: rgb(248, 248, 248);
}

.rightColumn {
    display: grid;
    grid-column-start: inspect;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2; 

    width: 80%;
    height: 100%;
    min-width: 560px;
    overflow: scroll;
}

---

我需要做的最后一件事是解决如何消除屏幕右侧的浪费空间，并使右列使用所有可用宽度。

最后，在尝试了许多组合后，我无法让flexbox将其布局。所以尝试显示：网格。如果灵活性较差，则更易于控制

以下是几乎最后的款式：

.allWrap {
    display: grid;
    grid-template-columns: [menu] 270px [inspect] auto;
    grid-template-rows: 100%;

    min-width: 830px;

    overflow: hidden;
}

.leftColumn {
    grid-column-start: menu;
    grid-column-end: inspect;
    grid-row-start: 1;
    grid-row-end: 2; 
    display: grid;
    position: fixed;
    left: 0;
    top: 0;
    font-size: 0.9em !important;

    width: 20%;
    min-width: 270px;
    background-color: rgb(248, 248, 248);
}

.rightColumn {
    display: grid;
    grid-column-start: inspect;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2; 

    width: 80%;
    height: 100%;
    min-width: 560px;
    overflow: scroll;
}

---

我需要做的最后一件事是解决如何消除屏幕右侧的浪费空间，并使右侧列使用所有可用宽度。

您是否尝试过flex wrap:wrap；？也许这不是你想要的，还有flex收缩和flex增长help@Jay您可以清楚地看到，我有完整的flex指令，其中包括flex收缩和flex增长，请参阅flex文档以了解。您是否尝试过flex wrap:wrap；？也许这不是你想要的，还有flex收缩和flex增长help@Jay您可以清楚地看到，我有完整的flex指令，其中包括flex收缩和flex增长，请参阅flex文档以了解。添加flex-wrap:nowrap没有帮助添加flex-wrap:nowrap没有帮助