max-width不适用于flex项目

Question

我有一个弹性容器和一个列中的两个弹性儿童.顶部div应该填满所有剩余空间.底部div的高度应由内容和a确定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

默认情况下,Flex项目可能缩小到其内容大小.(此行为可能因浏览器而异.)

这是因为块格式化上下文中不再存在弹性项,块级元素会自动占用width: 100%.在flex格式化上下文中,元素具有不同的默认值.

因此,要开始max-width处理Flex项目,也要给出项目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>

Answer 2

除了Michael_B 的回答之外，在这种情况下，它是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>