设置padding为0时<ul>溢出嵌套Flexbox容器的问题咨询

咱们先拆解下你碰到的问题：你已经用全局选择器*重置了内外边距，但<ul>还是溢出容器，核心原因有两个——一是全局样式里的margin: none是错误写法，浏览器不会识别；二是<ul>默认的list-style-position是outside，列表项的项目符号会在元素内容框外部渲染，哪怕你把padding设为0，这部分符号也会超出容器范围，再加上嵌套Flex布局的尺寸约束没处理好，就导致了双重溢出。

具体修复步骤： #

1. 修正全局margin重置错误
   margin属性没有none这个合法取值，浏览器会忽略这个规则，导致<ul>还保留着默认的外边距。把它改成margin: 0：

   * { 
     margin: 0; /* 修正此处的错误写法 */
     padding: 0; 
     box-sizing: border-box; 
   }
   

2. 把列表项目符号移到内容框内部
   给<ul>添加list-style-position: inside，让项目符号在元素的内容区域内渲染，就不会超出容器边界了：

   ul {
     list-style-position: inside;
   }
   

3. 确保嵌套Flex容器的尺寸约束
   给嵌套在.flex__box里的.container__flex加上width: 100%，保证它完全占满父容器的可用宽度，避免Flex子项的尺寸计算出错：

   .flex__box .container__flex {
     width: 100%;
   }
   

调整后的完整关键代码： #

: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: 0; 
  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;
}
/* 确保嵌套Flex容器占满父容器宽度 */
.flex__box .container__flex {
  width: 100%;
}

这样调整后，你的无序列表就不会再溢出父容器和子容器了，核心是解决了列表项目符号的外部渲染问题，同时修正了全局样式的错误，让Flex布局的尺寸计算逻辑更严谨。

内容的提问来源于stack exchange，提问作者Bishant Bhattarai