边框没有覆盖整个 div

Question

这是我的代码的一部分，这里的顺序没有覆盖完整的 div。有 2 个子 div 连续，我使用 bootstrap 来完成我的 CSS 部分和一些使用样式标签的内联 CSS，这部分代码来自我的 react 项目

<div className="bg-white d-flex flex-row flex-wrap justify-content-between border border-primary" style={{"width":"fit-content", "zIndex": "4", "borderTop": "#ffffff", "margin":"auto", "minHeight":"200px", "minWidth":"600px" }}>
            
            <div className="accesories text-start">
                    <p style={{ "color": "#7a7a7a", "margin":"0 10px" }}>Accesories</p>
                <div className="accesories-heading d-flex flex-column justify-content-between flex-wrap text-start"  style={{ "maxHeight":"40vh",}}>
                    <div style={{"margin":"10px 10px"}}>ApppleCare</div>
                    <div style={{"margin":"10px 10px"}}>AirPort & Wireless</div>
                    <div style={{"margin":"10px 10px"}}>Bags, Shells & Sleeves</div>
                    <div style={{"margin":"10px 10px"}}>Business & Security</div>
                    <div style={{"margin":"10px 10px"}}>Cables & Docks</div>
                    <div style={{"margin":"10px 10px"}}>Cameras & Video</div>
                    <div style={{"margin":"10px 10px"}}>Car & Travel</div>
                    <div style={{"margin":"10px 10px"}}>Cases & Films</div>
                </div>
            </div>

            <div className="category d-flex flex-column justify-content-between flex-wrap text-start" style={{"margin":"0 0 0 10vw"}}>
                    <p style={{"color":"#7a7a7a", "margin":"0 10px" }}>Category</p>
                <div className="category-heading d-flex flex-column justify-content-between flex-wrap text-start"  style={{ "maxHeight":"40vh",}}>
                    <div style={{"margin":"10px 10px"}}>Charging Devices</div>
                    <div style={{"margin":"10px 10px"}}>Connected Home</div>
                    <div style={{"margin":"10px 10px"}}>Device Care</div>
                    <div style={{"margin":"10px 10px"}}>Display & Graphic</div>
                    <div style={{"margin":"10px 10px"}}>Fitness & Sport</div>
                    <div style={{"margin":"10px 10px"}}>Headphones</div>
                    <div style={{"margin":"10px 10px"}}>HealhKit</div>
                    <div style={{"margin":"10px 10px"}}>Mice & Keyboards</div>
                    <div style={{"margin":"10px 10px"}}>Music Creation</div>
                    <div style={{"margin":"10px 10px"}}>Networking & Server</div>
                </div>
            </div>
        </div>

在此处查看输出图像

Answer 1

我认为这里的问题是你的style={{ "maxHeight":"40vh",}}。 您的列似乎有足够的空间，因此您的元素位于多个列中。

Answer 2

添加这个css属性overflow: auto; 在你的代码的第一行

<div className="bg-white d-flex flex-row flex-wrap justify-content-between border border-primary" style={{"width":"fit-content", "zIndex": "4", "borderTop": "#ffffff", "margin":"auto", "minHeight":"200px", "minWidth":"600px" }}>