html - Flex 重叠 2 个子 flex 布局类连续设置

Question

我有 2 个 css 类 leftColumn 和 rightColumn 排列在 React SPA 的行布局中。问题在于，当浏览器变窄时，rightColumn 会在 leftColumn“下方”，从而遮盖了其中的元素。

左列覆盖右列

代码如下:

            <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>

CSS 类如下所示:

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

    justify-content: space-around;
    overflow: hidden;
}

.leftColumn {
    flex: 1 1 25%;
    display: flex;
    position: fixed;
    left: 0;
    top: 0;
    justify-content: flex-start;
    flex-direction: column;
    font-size: 0.9em !important;

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

.rightColumn {
    flex: 3 1 75%;
    display: flex;
    flex-direction: column;
    justify-content: center;

    width: 80%;
    min-width: 560px;
    margin-left: 20%;
}

Ant 想法如何解决这个问题？我已经尝试了很多 flex 设置的组合，但没有任何影响。

我需要的是让 leftColumn 和 rightColumn 随浏览器窗口缩小宽度而缩小宽度，每个都缩小到最小尺寸，然后让每个都获得水平滚动条

Answer 1

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;

}