css - react /HTML5 : How to avoid details tag from being wrapped to next row after openning it?

Question

您好，感谢您抽出宝贵时间!

我正在学习如何使用 flex 和 React。

我正面临一个奇怪的情况。目前有一个细节组件，其目的是打开/关闭控件:

<details className="spaced-column" style={{
                        backgroundColor: "green",
                        flexWrap: "nowrap"
                    }}>
                        <summary>Controles</summary>

                        <div>
                            <Dropdown options={this.options} onChange={this._onSelect}
                                      placeholder="Select an option"/>
                        </div>
                        <div className="row">
                            <label><input type="checkbox" id="chbox1" value="1"/>Option 1</label>
                            <label><input type="checkbox" id="chbox2" value="2"/>Option 2</label>
                        </div>
                        <div className="row">
                            <label><input type="checkbox" id="chbox3" value="3"/>Option 3</label>
                            <label><input type="checkbox" id="chbox4" value="4"/>Option 4</label>
                        </div>
                        <div className="column-right-aligned">
                            <Button incrementValue={1} onClickFunction={this.incrementCounter}/>
                            <Button incrementValue={5} onClickFunction={this.incrementCounter}/>
                            <Button incrementValue={10} onClickFunction={this.incrementCounter}/>
                            <Button incrementValue={100} onClickFunction={this.incrementCounter}/>
                            <Result counter={this.state.counter}/>

                        </div>
                    </details>

此外，间隔列类是:

.spaced-column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

需要保持组件在同一行

目前，当我们打开详细信息流到下一行时。 😲

当窗口处于最大尺寸时，详细信息是右侧的绿色 div:

打开详细信息时，它们仍然在同一行中:

当我们调整大小时，控件要么关闭要么打开流到下一行:

我已阅读更多详细信息:https://developer.mozilla.org/es/docs/Web/CSS/flex-wrap https://www.w3schools.com/tags/tag_details.asp https://www.w3schools.com/html/html5_new_elements.asp

然后，正如您在照片和代码中看到的那样，我尝试使用:

style{{flexWrap:"nowrap"}}

我怀疑它可能与灰色和黄色 div(它们是 Canvas )有关，并且它们的大小使用视口(viewport)为:

.imgPreview {
    text-align: center;
    margin: 5px 15px;
    height: 80vh;
    width: 40vw;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    border-top: 5px solid #000000;
    border-bottom: 5px solid #000000;
}

你愿意帮我解决这个问题吗？比起解决方案本身，我更希望得到解释!

Answer 1

我找到了解决方案，但我不太理解，这只是纯粹的尝试和错误:😖😖😖

两个 Canvas 的完整代码和细节:

 <main>
        <header>
            <h3>Suba una imagen desde el ordenador, para mostrarla:</h3>
        </header>
        <article className="multi-line-no-spaced-row">
            <section className="multi-line-row">
                < section className="spaced-column" style={{
                    backgroundColor: 'gray',
                }}>
                    <ImageUpload onChange={this.setFileFromUrl} file={this.state.file}
                                 upload={this.state.upload}/>
                </section>
                <section className="spaced-column" style={{
                    backgroundColor: 'yellow',
                }}>
                    <ImageUpload onChange={this.setFileFromUrl} file={this.state.file}
                                 upload={this.state.upload}/>
                </section>
            </section>
            <details className="spaced-column" style={{
                backgroundColor: "green",
                flexWrap: "nowrap"
            }}>
                <summary>Controles</summary>

                <div>
                    <Dropdown options={this.options} onChange={this._onSelect}
                              placeholder="Select an option"/>
                </div>
                <div className="row">
                    <label><input type="checkbox" id="chbox1" value="1"/>Option 1</label>
                    <label><input type="checkbox" id="chbox2" value="2"/>Option 2</label>
                </div>
                <div className="row">
                    <label><input type="checkbox" id="chbox3" value="3"/>Option 3</label>
                    <label><input type="checkbox" id="chbox4" value="4"/>Option 4</label>
                </div>
                <div className="column-right-aligned">
                    <Button incrementValue={1} onClickFunction={this.incrementCounter}/>
                    <Button incrementValue={5} onClickFunction={this.incrementCounter}/>
                    <Button incrementValue={10} onClickFunction={this.incrementCounter}/>
                    <Button incrementValue={100} onClickFunction={this.incrementCounter}/>
                    <Result counter={this.state.counter}/>

                </div>
            </details>

还有 CSS 类:

.multi-line-row {

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.multi-line-no-spaced-row {

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.spaced-column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

那么，正如您想象的那样，我只是更改了 flex-wrap: nowrap;到两行:

.multi-line-row {

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.multi-line-no-spaced-row {

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

我也不喜欢细节的 child 看起来局促:

我们如何将细节的宽度扩展到完整尺寸，使其在打开后占据所有宽度？