我有一列中有一个弹性容器和两个弹性子容器。顶部 div 应填充所有剩余空间。底部 div 的高度应由内容和max-width。但底部 div 的宽度正在缩小到其内容的宽度。这max-width正在被忽视。
.hero_image {
min-height: 100vh;
display: flex;
flex-direction: column;
background-color: yellow;
}
.impact_image {
flex-grow: 1;
background-image: url(https://s16.postimg.org/cjw1kzkkl/circles.png);
background-position: center bottom;
background-size: cover;
}
.intro {
max-width: 600px;
flex-shrink: 0;
margin: 0 auto;
background-color: pink;
}
h1 {
font-size: 20px;
}
<div class="hero_image">
<div class="impact_image"></div>
<div class="intro">
<h1>XYZ brand consultancy<br>making a difference</h1>
</div>
</div>
这是 JS 小提琴：https://jsfiddle.net/cke6qr8e/ https://jsfiddle.net/cke6qr8e/
默认情况下，Flex 项目可能会缩小到其内容大小。 （此行为可能因浏览器而异。）
这是因为弹性项目不再存在于块格式化上下文，其中块级元素自动采用width: 100%. In a Flex 格式化上下文，元素有不同的默认值。
因此，要得到max-width要处理弹性项目，还要提供该项目width: 100%.
.hero_image {
min-height:100vh;
display:flex;
flex-direction:column;
background-color:yellow;
}
.impact_image {
flex-grow:1;
background-image:url(https://s16.postimg.org/cjw1kzkkl/circles.png);
background-position: center bottom;
background-size:cover;
}
.intro {
max-width:600px;
flex-shrink: 0;
margin:0 auto;
background-color:pink;
width: 100%; /* NEW */
}
h1 {
font-size:20px;
}
<div class="hero_image">
<div class="impact_image"></div>
<div class="intro">
<h1>XYZ brand consultancy<br>making a difference</h1>
</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
