最大宽度不适用于弹性项目

Question

我有一列中有一个 flex 容器和两个 flex 子项。顶部 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/

Answer 1

除了Michael_B's answer，在这种情况下是margin: 0 auto导致.intro折叠，所以如果你删除它，它的宽度不会折叠到它的内容，但这也会使居中它也不能正常工作。

另一种解决方案是删除intro 规则并将其属性移至h1（除了flex-shrink: 0）。

html, body { margin: 0; }

.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 h1 {
  max-width: 600px;
  margin: 0 auto;
  font-size: 20px;
  background-color: pink;
}

<div class="hero_image">
  <div class="impact_image"></div>
  <div class="intro">
    <h1>XYZ brand consultancy<br>making a difference</h1>
  </div>
</div>

Answer 2

默认情况下，Flex 项目可能会缩小到其内容大小。 （此行为可能因浏览器而异。）

这是因为弹性项目不再存在于 块格式化上下文中，块级元素自动采用width: 100%。在 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>