CODEWITHSUNDEEP
htmlcssflexbox
Chris
Chris

Reputation: 365

Image inside of a flexbox keeps breaking flex box when the width of the window gets larger

I am attempting to create a responsive splash page that will be cover most of the page in view(90vh). On top it has a logo and on the bottom a simple paragraph.

I have tried to use flex-shrink and flex-basis but it doesn't seem to work in a way that resizes the top image and doesn't bump the bottom text out size of the actual container.

I am not sure what I am missing here. It feels like the size of the image is somehow overriding the flexbox when the page in view gets wider than tall.

Here is a jfiddle: https://jsfiddle.net/jtpetqtk/

.splash-container{
	display: flex;
	height: 90vh;
	flex-direction: column;
	text-align: center;
	border: 10px solid goldenrod;
	justify-content: space-around;
}

.logo{
	background: red;
	img{
		max-width: 100%;
		max-height: 100%;
	}
}

.mission{
	background: yellow;
}
<div class="splash-container">
		<div class="logo">
			<img src="http://www.ticotimes.net/wp-content/uploads/2016/01/150118Carrotandstick-800x800.jpg">
		</div>
		<div class="mission">
			<h1>Mission Statement</h1>
			<p>Our mission is to create a flexbox that doesn't break. It should be responive and contained in 90vh. </p>
		</div>
</div>

Upvotes: 0

Views: 2113

Answers (1)

wesbos
wesbos

Reputation: 26317

I'm not sure if you if this is too easy of a fix but you are writing Scss and the fiddle only shows CSS, so the img selector is never working.

It works if you switch to scss or change the selector to proper css:

.logo img { max-width: 100%; max-height: 80%; }

https://jsfiddle.net/jtpetqtk/2/

Upvotes: 2

Related Questions