Fatal编程技术网
  • html/
  • Html flexbox中超出父div的水平边距

Html flexbox中超出父div的水平边距

html css sass

Html flexbox中超出父div的水平边距,html,css,sass,flexbox,Html,Css,Sass,Flexbox,我在使用flex时遇到了一些意想不到的行为，我希望得到一些帮助来理解原因 我有一些简单的html，比如： <div className="dashboard"> <div className="dashboard__inner-container">Inner Container</div> </div> 我所期望的是，内部容器将完全填满父容器，顶部和底部为-100px，右侧和左侧为50px。垂直边距按预期工作，但水平边距实际上延伸到父d

我在使用flex时遇到了一些意想不到的行为，我希望得到一些帮助来理解原因

我有一些简单的html，比如：

<div className="dashboard">
    <div className="dashboard__inner-container">Inner Container</div>
</div>
我所期望的是，内部容器将完全填满父容器，顶部和底部为-100px，右侧和左侧为50px。垂直边距按预期工作，但水平边距实际上延伸到父div之外，因此内部容器似乎仍然占据父div的整个宽度

我不确定这是否与flexbox有关

这是一个独立的代码笔

当使用
对齐项目：居中
和
列
方向时，项目将折叠到其内容宽度，而不是默认的
拉伸
，这使其填充其父项的宽度

此外，当将
宽度：100%
设置为
内部
时，它将覆盖默认的
拉伸
，这将使项目为父项宽度+边距的100%

对于预期输出，移除
外部
上的
对齐项目：居中
和
内部
上的
宽度：100%

堆栈片段



html{
身高：100%；
溢出：自动；
}
.外部{
显示器：flex；
证明内容：中心；
弯曲方向：立柱；
背景色：#f4f6f8；
身高：100%；
}
.内部{
显示器：flex；
弯曲方向：立柱；
背景色：#ffffff；
flex:1自动；
文本对齐：居中；
利润率：100px 80px；
}



外面的
内部的



.dashboard {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex: 1 1 auto;
  background-color: #f4f6f8;
}

.dashboard__inner-container {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  flex: 1 1 auto;
  width: 100%;
  margin: 100px 50px;
}