为什么在<ul>填充设置为零时开箱即用？

Question

此容器使用嵌套的弹性框排列。当我添加零填充的无序列表时，它超出了子容器。不仅如此，它还超出了父容器。

:root {
--main-bg-color: #3D3E5D;
--bg-color-red: #F06D4F;
--bg-color-aqua: #2DA6A4;
--bg-color-orange: #EFB85E;
--txt-color-primary: black;
--txt-color-secondary: white;
--heading: 3rem;
--sub-heading: 2rem;
--normal: 1rem;
--small: 0.5rem;
--main-padding: 10px;
}
* {
margin: none;
padding: 0;
box-sizing: border-box;
}
.container__main {
width: 90%;
margin: auto;
}
.container__flex {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.flex__box {
font-weight: 900;
font-size: var(--normal);
background-color: aqua;
flex: 0 0 calc(50% - 10px);
}
.red {
background-color: red;
}
.gray {
background-color: gray;
}
.container__main>.container__flex {
margin-bottom: 10px;
}
.container__flex>.flex__box {
padding: var(--main-padding);
}
.p-0 {
padding: 0 !important;
}

<div class="container__main">
<div class="container__flex">
<div class="flex__box">
<b></b>
<span class="heading">W</span>eb <span class="heading">A</span>pplication <span class="heading">T</span>echnologies
</div>
<div class="flex__box gray">
<div class="container__flex">
<div class="flex__box p-0 red">
<span class="sub-heading">Links</span>
<ul>
<li>Chubkins</li>
<li>W3 Schools</li>
<li>Learn Web Dev</li>
<li>Colour Reference</li>
</ul>
</div>
<div class="flex__box p-0 red">
</div>
</div>
</div>
</div>
<div class="container__flex">
<div class='flex__box'>
box1
</div>
<div class='flex__box'>
box2
</div>
</div>
</div>

上述问题的图片：https://prnt.sc/plgv0y

如果您想帮助我调试此视图，请查看此代码笔链接： https://codepen.io/bishant-bhattarai/pen/qBBqqYE

由于这是一个小项目，我没有添加任何评论，很抱歉不合

时宜。

Answer 1

这可能是由于 CSS 属性的默认值list-style-position。 您可以尝试像这样更改它：

:root {
--main-bg-color: #3D3E5D;
--bg-color-red: #F06D4F;
--bg-color-aqua: #2DA6A4;
--bg-color-orange: #EFB85E;
--txt-color-primary: black;
--txt-color-secondary: white;
--heading: 3rem;
--sub-heading: 2rem;
--normal: 1rem;
--small: 0.5rem;
--main-padding: 10px;
}
* {
margin: none;
padding: 0;
box-sizing: border-box;
}
.container__main {
width: 90%;
margin: auto;
}
.container__flex {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.flex__box {
font-weight: 900;
font-size: var(--normal);
background-color: aqua;
flex: 0 0 calc(50% - 10px);
}
.red {
background-color: red;
}
.gray {
background-color: gray;
}
.container__main>.container__flex {
margin-bottom: 10px;
}
.container__flex>.flex__box {
padding: var(--main-padding);
}
.p-0 {
padding: 0 !important;
}
ul {
list-style-position: inside;
}

<div class="container__main">
<div class="container__flex">
<div class="flex__box">
<b></b>
<span class="heading">W</span>eb <span class="heading">A</span>pplication <span class="heading">T</span>echnologies
</div>
<div class="flex__box gray">
<div class="container__flex">
<div class="flex__box p-0 red">
<span class="sub-heading">Links</span>
<ul>
<li>Chubkins</li>
<li>W3 Schools</li>
<li>Learn Web Dev</li>
<li>Colour Reference</li>
</ul>
</div>
<div class="flex__box p-0 red">
</div>
</div>
</div>
</div>
<div class="container__flex">
<div class='flex__box'>
box1
</div>
<div class='flex__box'>
box2
</div>
</div>
</div>

参看 https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-position