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

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

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

因此，要让max-width处理Flex项目，还要提供项目width: 100%。

＆＃13;

.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;
	}

＆＃13;

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

＆＃13;

Answer 2

除了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>

max-width不适用于flex项目

2 个答案: