CODEWITHSUNDEEP
htmlcssflexbox
Markeee
Markeee

Reputation: 573

max-width not working on flex item

I have a flex container and two flex children in a column. The top div should fill all remaining space. The bottom div should have a height determined by the content and a max-width. But the bottom div's width is shrinking to the width of its content. The max-width is being ignored.

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

Here is the JS Fiddle: https://jsfiddle.net/cke6qr8e/

Upvotes: 19

Views: 33984

Answers (2)

Asons
Asons

Reputation: 87191

In addition to Michael_B's answer, in this case it is the margin: 0 auto that cause the .intro to collapse, so if you remove it, its width will not collapse to its content, but that will also make the centering of it to not work as well.

Another solution would be to delete the intro rule and move its properties to the h1 instead (all but 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>

Upvotes: 2

Michael Benjamin
Michael Benjamin

Reputation: 371231

Flex items, by default, may shrink to their content size. (This behavior may vary among browsers.)

This is because flex items no longer exist in a block formatting context, where block level elements automatically take width: 100%. In a flex formatting context, elements have different defaults.

Therefore, to get max-width to work on a flex item, also give the item 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>

Upvotes: 37

Related Questions