Flexbox child does not read parent's height / width
I experimented with flexbox and created this layout. I'm trying to get a middle white box that says "hey" should be 90% of the parent's width / height, but the percentages don't affect it. (I set it to 100px / 100px which works)
Strange, since the parent has a specific width / height when checked.
Can anyone tell me how to implement this? (general criticism of how I used flexbox was also appreciated)
http://jsfiddle.net/yv3Lw5gy/1/
corresponding class:
.super-thing{
height: 100px;
width: 100px;
background-color: white;
margin:auto;
box-shadow: 2px 1px 1px #000;
}
source to share
The parent .body
.super-thing
is display: flex
, so it doesn't inherit its height or width unless they have flex properties.
The strength of flex forces you!
Set flex: 1
in .super-thing
that it shrank and increased with 1% stock to create a gap. No width or height needed.
.super-thing {
background-color: white;
margin: 1%;
box-shadow: 2px 1px 1px #000;
flex: 1;
}
Complete example
In this example box-sizing: border-box
and removing the field to be padded with <body>
, get the entire container to fit in the viewport so that there is no scrollbar.
* {
background-color: rgba(255, 0, 0, .2);
box-sizing: border-box;
}
* * {
background-color: rgba(0, 255, 0, .2);
}
* * * {
background-color: rgba(0, 0, 255, .2);
}
* * * * {
background-color: rgba(255, 0, 255, .2);
}
* * * * * {
background-color: rgba(0, 255, 255, .2);
}
* * * * * * {
background-color: rgba(255, 255, 0, .2);
}
html,
body,
.container {
height: 100%;
}
body {
padding: 10px;
margin: 0;
}
.container {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: stretch;
/* align-content: center; */
}
.header {
flex: 1 0 30px;
display: flex;
}
.header-left {
flex: 11 0 auto;
}
.header-right {
flex: 1 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
.header-right .small-item {
width: 100%;
outline: 1px solid #fff;
}
.main {
background-color: #fff;
flex: 10 0 30px;
display: flex;
}
.left-column {
flex: 3;
flex-direction: column;
display: flex;
justify-content: center;
}
.left-column .story {
flex: 2;
outline: 1px solid white;
/* margin:auto; */
}
.right-column {
flex: 12;
background-color: #f0f;
display: flex;
flex-direction: column;
}
.right-column-body {
flex: 10;
display: flex;
flex-direction: column;
}
.right-column-body .header {
flex: 1;
display: flex;
justify-content: center;
}
.thing {
width: 20%;
margin: 5px
}
.super-thing {
background-color: white;
margin: 1%;
box-shadow: 2px 1px 1px #000;
flex: 1;
}
.right-column-body .body {
background-color: #ccc;
flex: 5;
display: flex;
flex-direction: column;
justify-content: center;
}
.right-column-footer {
flex: 1;
background-color: white;
}
.footer {
flex: 1 0 30px;
}
<div class="container">
<div class="header">
<div class="header-left">Left</div>
<div class="header-right">
<div class="small-item">A</div>
<div class="small-item">B</div>
<div class="small-item">C</div>
<div class="small-item">D</div>
</div>
</div>
<div class="main">
<div class="left-column">
<span class="story">A</span>
<span class="story">A</span>
<span class="story">A</span>
<span class="story">A</span>
</div>
<div class="right-column">
<div class="right-column-body">
<div class="header">
<div class="thing">A</div>
<div class="thing">B</div>
<div class="thing">C</div>
</div>
<div class="body">
<div class="super-thing">Hey</div>
</div>
<div class="right-column-footer">Footer</div>
</div>
</div>
</div>
<div class="footer">Footer</div>
</div>
source to share