Flex 重叠 2 个子 flex 布局类连续设置答案

【问题标题】：Flex overlapping 2 child flex layout class set in a rowFlex 重叠 2 个子 flex 布局类连续设置
【发布时间】：2019-11-09 22:06:36
【问题描述】：

我有 2 个 css 类 leftColumn 广告 rightColumn 排列在一个 React SPA 的行布局中。问题是，当浏览器变窄时，rightColumn 会在 leftColumn 的“下方”隐藏其中的元素。

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>

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%;
}

蚂蚁知道我该如何解决这个问题？我已经尝试了许多 flex 设置的组合而没有任何影响。

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

【问题讨论】：

你试过 flex-wrap: wrap; 吗？
也许这不是你想要的，还有 flex-shrink 和 flex-grow 可能会有所帮助
@Jay 你可以清楚地看到我有完整的 flex 指令，包括 flex-shrink 和 flex-grow，请参阅 flex 文档以了解。

标签： html css reactjs flexbox

【解决方案1】：

在尝试了很多组合之后，我最终无法让 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;
}

我需要做的最后一件事是弄清楚如何摆脱屏幕右侧浪费的空间并让 rightColumn 使用所有可用宽度。

【讨论】：

【解决方案2】：

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;

}

【讨论】：

添加 flex-wrap: nowrap 没有帮助