调整屏幕大小时，为什么我的 div 会超出其父 div？答案

【问题标题】：Why is my div going out of its parent div when the screen is resized?调整屏幕大小时，为什么我的 div 会超出其父 div？
【发布时间】：2023-01-07 02:41:54
【问题描述】：

我正在处理纯 html/css 的个人作品集，并试图通过使用媒体查询使网站响应。下面的代码显示了我投资组合的两个部分。

我的问题是 worked-dash 类 div。当窗口的大小调整到低于工作破折号的宽度时，工作破折号 div 会超出其父 div，而不是自动调整大小。

令人难以置信的是我的另一个 div，about-dash，工作得很好。所以我将包括用于比较的代码。这是 About-dash working as intended 和 problematic worked-dash. 的代码笔。请务必更改代码笔视图的方向并将视口的大小调整到 420 像素以下以查看差异。

about-dash 按预期工作的屏幕截图：

代码：

:root {
    --background:#f8f9fa;
    --about-info-text-color:#f8f9fa;
    --sec-worked-background-color:#003772;
    --org-description-background-color:#0456ad;
    --org-description-boxshadow:#0169d8;
    --org-description\job-tasks-text-color:#f8f9fa;
    --projects-description-background-color:#FFFFFF;
    --projects-description-boxshadow:#eaeaea;
    --card-project-title-background-color:#003772;
    --card-project-title-text-color:#f8f9fa;
    --work-duration-color:#68abf1;
    --footer-background-color:#003772;
    --footer-heading:#f8f9fa;
    --socials-background-color:#f8f9fa;
    --footnote-text-color:#68abf1;
    --memoji-background:#d3d5d6;
    --memoji-shadow:#d3d5d6;
    --anchor-accents:#3083DC;
    --anchor-opacity: 48,131,220;/*Decimal RGB version of the above color*/
    --title-color:#FFFFFF;
    --title-background:#3083dc;
    --title-accent:#0051a8;
    --shadow:#d4d4d4;
    --JetBrains:'JetBrains Mono', monospace;
    --Roboto:'Roboto', sans-serif;
}

/*Normalization*/
*,
::before,
::after {
    padding:0;
    margin:0;
}

html {
    box-sizing: border-box;
}

body {
    background-color: #f8f9fa;
}

.sec-about {
    width:100%;
    height:103vh;
    display:flex;
    flex-direction: column;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    background-color:#003772;
}

.about-center {
    width:1170px;
    padding:75px 20px 23px 50px;
    height:fit-content;
    display:flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    margin-top:0px;
    border-radius: 6px;
}

.about_me_title {
    font-family: var(--Roboto);
    width: fit-content;
    padding:10px 5px;
    position:relative;
    top:-50px;
    background-color:var(--title-background);
    color:var(--title-color);
    box-shadow:7px 7px var(--title-accent);
    font-size:2em;
}

.about-dash {
    width:70%;
    height:5px;
    background-color:var(--anchor-accents);
    position:relative;
    left:170px;
    top:-20px;
}

.about-info {
    padding-right: 10px;
    font-family: var(--Roboto);
    text-align: justify;
    color:var(--about-info-text-color);
}


/************************************************RESPONSIVE-DESIGN******************************************/
  
  @media (min-width: 320px) and (max-width:420px) {

    html {
        background-color: red;
    }

    /* About Section */

    .sec-about {
        height:100%;
        flex-direction: row;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .about-center {
        margin-top:30px;
        width:100%;
        height:fit-content;
        flex-direction: column;
        padding: 0px;
        border-radius:0px;
    }

    .about-info {
        height:200px;
        padding-right: 0px;
        font-family: var(--Roboto);
        text-align: justify;
        color:var(--about-info-text-color);
        width:90%;
        padding-bottom: 20px;
    }

    .about-dash {
        width: 60%;
        height:5px;
        background-color:var(--anchor-accents);
        margin-top:-10px;
        position: relative;
        top:20px;
        left:120px;
    }

    .about_me_title {
        width: fit-content;
        padding:10px 5px;
        position: relative;
        top:50px;
        margin-top: -60px;
        margin-bottom: 20px;
        background-color:var(--title-background);
        color:var(--title-color);
        box-shadow:7px 7px var(--title-accent);
        font-size:1.25em;
    }

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href=".\style.css"/>
    <title>Portfolio V1</title>
    <!--JetBrains Mono Font-->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;200;300;400;500;600;700&display=swap" rel="stylesheet">
    <!--Roboto Font-->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
</head>


<body>
    <header class="Header"></header>
        <main>
        <section class="sec-about">
            <div class="about-center">
                <article class="about-info">
                    <div class="about-dash"></div>
                    <h2 class="about_me_title">About Me</h2>
                </article>
            </div>
        </section>
</main>
</body>
</html>

打破它的父 div 的工作破折号的屏幕截图：

代码：

:root {
    --background:#f8f9fa;
    --about-info-text-color:#f8f9fa;
    --sec-worked-background-color:#003772;
    --org-description-background-color:#0456ad;
    --org-description-boxshadow:#0169d8;
    --org-description\job-tasks-text-color:#f8f9fa;
    --projects-description-background-color:#FFFFFF;
    --projects-description-boxshadow:#eaeaea;
    --card-project-title-background-color:#003772;
    --card-project-title-text-color:#f8f9fa;
    --work-duration-color:#68abf1;
    --footer-background-color:#003772;
    --footer-heading:#f8f9fa;
    --socials-background-color:#f8f9fa;
    --footnote-text-color:#68abf1;
    --memoji-background:#d3d5d6;
    --memoji-shadow:#d3d5d6;
    --anchor-accents:#3083DC;
    --anchor-opacity: 48,131,220;/*Decimal RGB version of the above color*/
    --title-color:#FFFFFF;
    --title-background:#3083dc;
    --title-accent:#0051a8;
    --shadow:#d4d4d4;
    --JetBrains:'JetBrains Mono', monospace;
    --Roboto:'Roboto', sans-serif;
}


/*Normalization*/
*,
::before,
::after {
    padding:0;
    margin:0;
}

html {
    box-sizing: border-box;
}

body {
    background-color: #f8f9fa;
}

.sec-worked {
    background-color:var(--sec-worked-background-color);
    display:flex;
    align-items: center;
    justify-content: center;
    width:100%;
    height:103vh;
}

.container-worked {
    margin-top: 0px;
    width:1100px;
    height:650px;
}

.worked-title {
    font-family: var(--Roboto);
    background-color:var(--title-background);
    color:var(--title-color);
    width:fit-content;
    padding:10px 5px;
    margin-bottom: 60px;
    box-shadow: 7px 7px var(--title-accent);
    font-size:2em;
}


.worked-dash {
    width:60%;
    height:5px;
    background-color:var(--anchor-accents);
    position:relative;
    left:290px;
    top:-89px;
}

/************************************************RESPONSIVE-DESIGN******************************************/
  
  @media (min-width: 320px) and (max-width:420px) {
    
    /* General */

    html {
        background-color:red;
    }

    /* Work Section */

    .sec-worked {
        background-color:var(--sec-worked-background-color);
        width:100%;
        height:100%;
        padding-bottom: 60px;
        margin:0px;
    }
    
    .container-worked {
        margin-top: 60px;
        width:100%;
        height: 20%;
    }
    
    .worked-title {
        font-family: var(--Roboto);
        background-color:var(--title-background);
        color:var(--title-color);
        width:fit-content;
        padding:10px 5px;
        margin-bottom: 60px;
        margin-left: 10px;
        box-shadow: 7px 7px var(--title-accent);
        font-size:1.25em;
    }
    
    .worked-dash {
        width:50%;
        height:5px;
        background-color:var(--anchor-accents);
        position:relative;
        left:200px;
        top:-81px;
        margin: 0px;
    }

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href=".\style.css"/>
    <title>Portfolio V1</title>
    <!--JetBrains Mono Font-->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;200;300;400;500;600;700&display=swap" rel="stylesheet">
    <!--Roboto Font-->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
</head>


<body>

    <header class="Header"></header>
        
    <main>
        <section class="sec-worked">
            <div class="container-worked">
                <h2 class="worked-title">Where I've worked</h2>
                <div class="worked-dash"></div>
            </div>
        </section>
    </main>
</body>
</html>

任何帮助将非常感激！

【问题讨论】：

看起来是因为您的 worked-dash 设置为 60% 并且您的 worked-title 设置为 fit-content，在低屏幕尺寸下，worked-title 元素大于 container-worked div 的 40%，因此元素溢出.
@Adam hmmm...但是在 about-dash 中，如果您“强制”它溢出，它不会暴露红色背景（html 背景设置为红色）。整个想法是，在更大的显示器中，因为会有更多的空间，仪表板会占用额外的空间。如果我将工作仪表板设置为低于 60%，它会在较大的显示器中留下不必要的空间。

标签： html css flexbox position

【解决方案1】：

这就是我所做的。我制作了 .container-worked 一个弹性盒子容器，并将宽度设置为全屏宽度的 90%。这意味着它的右侧始终存在间隙。我还使用了align-items: center，这样您就不需要使用相对定位来使破折号居中。然后，我在 worked-dash flex 项目上使用了 flex-grow 以确保它始终扩展以填满父 div 的宽度。

如果您在较小的屏幕尺寸下使用该方法，它仍然适合，因此不需要媒体查询。希望这可以帮助。如果这不是您要找的，请在下方给我留言。

:root {
  --sec-worked-background-color: #003772;
  --anchor-accents: #3083dc;
  --title-color: #ffffff;
  --title-background: #3083dc;
  --title-accent: #0051a8;
  --JetBrains: "JetBrains Mono", monospace;
  --Roboto: "Roboto", sans-serif;
}

/*Normalization*/
*,
::before,
::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box; /* moved this from html rule so it applies on all elements */
}

body {
  background-color: #f8f9fa;
}

.sec-worked {
  background-color: var(--sec-worked-background-color);
  display: flex;
  align-items: center; /* put the element in the center of the div vertically */
  height: 103vh;
}

.container-worked {
  width:90%; /* Set this at 90% so there's a gap on the RHS of the container */
  display: flex;
  align-items: center; /* this means we can vertically align the worked-dash element in the worked-title div. */
}

.worked-title {
  font-family: var(--Roboto);
  background-color: var(--title-background);
  color: var(--title-color);
  padding: 10px 5px;
  box-shadow: 7px 7px var(--title-accent);
  font-size: 2em;
}

.worked-dash {
  height: 5px;
  flex-grow:1; /* added this so that this element always expands to fill the width of the parent div */
  background-color: var(--anchor-accents);
}

<main>
  <section class="sec-worked">
    <div class="container-worked">
      <h2 class="worked-title">Where I've worked</h2>
      <div class="worked-dash"></div>
    </div>
  </section>
</main>

【讨论】：