Why is the image (#avatar) not resizing in height with flex? I tried setting its height manually and it worked. But I really want it to be done using flex.
I'm not sure if this is my mistake or a flex error...
Please add a complete sample code.
It only works when I add this to #avatar: - height: 10vh;
body{
margin: 0;
}
.startContainer {
width: 100vw;
height: 100vh;
position: absolute;
background-image: url("http://i.imgur.com/NVYPtGJ.jpg");
background-size: cover;
background-repeat: no-repeat;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: cen...
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>John Doe</title>
<link rel="stylesheet" href="css/preload.css">
<link rel="stylesheet" href="css/index.css">
<link href='https://fonts.googleapis.com/css?family=Press+Start+2P' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="startContainer">
<div class="startSideItem sideContainer">
<div class="sideItem">
<img alt="" class="arrow" id="rotateLeft" src="http://i.imgur.com/XBejH02.png">
<p>About Me</p>
</div>
</div>
<div class="startCenterItem centerContainer">
<div class="topBottomCenterItem"></div>
<div class="centerItem">
<img alt="" id="avatar" src="http://i.imgur.com/m5U9gy2.png">
</div>
<div class="topBottomCenterItem">
<p>Contact</p>
<img alt="" class="arrow" id="rotateDown" src="http://i.imgur.com/XBejH02.png">
</div>
</div>
<div class="startSideItem sideContainer">
<div class="sideItem">
<p>Portfolio</p>
<img alt="" class="arrow" src="http://i.imgur.com/XBejH02.png">
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/jquery.gsap.min.js"></script>
<!-- <script src="js/preload.js"></script>-->
</body>
</html>