Menu
I have the following html and css:
HTML:
<body style="height:100%;">
<div class="fb-container">
<div class"somedatadiv">
Some data
</div>
<div class="anotherdiv">
data
</div>
</div>
</body>
CSS:
.fb-container {
display: flex;
flex-wrap: no-wrap;
align-items: stretch;
// min-height: 100%;
}
.somedatadiv {
width: 75%;
max-width: 345px;
backround: grey;
padding: 30px;
}
for some reason the flex container div is not stretching 100% of the body height.
(the browser I am using is chrome for this "demo/application/site")
735
add this and it should work. Demo: https://jsfiddle.net/jacobgoh101/svtewj9j/
html,
body {
height: 100%;
}
body {
display: flex;
}
update: if you want the fb-container to stay full width
add flex: 1 1 100%; to it
.fb-container {
flex: 1 1 100%;
}
update: complete solution https://jsfiddle.net/jacobgoh101/svtewj9j/2/
html,
body {
height: 100%;
}
body {
display: flex;
}
.fb-container {
display: flex;
flex-wrap: no-wrap;
align-items: stretch;
flex: 1 1 100%;
}
.somedatadiv {
flex: 1 1 75%;
max-width: 345px;
backround: grey;
padding: 30px;
box-sizing: border-box;
}
You need to add display:flex to the parent tag for and then flex:1 to the child to enable the child to expand to 100% of parent.
.fb-container {
background-color:green;
flex: 1;
}
.somedatadiv {
width: 75%;
max-width: 345px;
background-color: grey;
padding: 30px;
}<body style="height:100vh;display:flex;">
<div class="fb-container">
<div class="somedatadiv">
Some data
</div>
<div class="anotherdiv">
data
</div>
</div>
</body>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
