Flexbox - Child not 100% height
Flexbox - Child not 100% height
I have a basic flex layout like this
.container
display:flex;
width:100%;
justify-content: space-between;
height:100%;
.left
width: calc(61.8034% - ( 0.38196600790794 * 20px ) );
.right
width: calc(38.1966% - ( 0.61803399209206 * 20px ) );
.left, .right
height:100%;
height:100%;
.image_container
background:red;
height:100%;
.image_container img
display:none;
.image_16x9_container
background:green;
display: block;
height: 0;
padding-bottom: 56.25%;
overflow: hidden;
<div class="container">
<div class="left">
<div class="image_container">
This is some example text
</div>
</div>
<div class="right">
<div class="image_16x9_container">
<img src="https://picsum.photos/500/500">
</div>
</div>
</div>
I can't work out why the left hand div is not 100% height, I assumed that making the parent div flex would automatically take care of this.
Where am I going wrong?
1 Answer
1
You are right, but you don't have to set height:100% on the flex items because it won't work and will break the default stretch behavior that make the element 100% height by default:
height:100%
.container
display: flex;
width: 100%;
justify-content: space-between;
.left
width: calc(61.8034% - ( 0.38196600790794 * 20px));
.right
width: calc(38.1966% - ( 0.61803399209206 * 20px));
.image_container
background: red;
height: 100%;
.image_container img
display: none;
.image_16x9_container
background: green;
display: block;
height: 0;
padding-bottom: 56.25%;
overflow: hidden;
<div class="container">
<div class="left">
<div class="image_container">
This is some example text
</div>
</div>
<div class="right">
<div class="image_16x9_container">
<img src="https://picsum.photos/500/500">
</div>
</div>
</div>
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
