'Flexbox child not reading height/width of parent

I was experimenting with flexbox and created this layout. I'm trying to get the middle white box that says "hey" to be 90% width/height of the parent but percentages don't seem to affect it. (I have it set as 100px/100px currently which works)

It's strange since the parent has a defined width/height on inspection.

Can anyone tell me how to implement that? (also, general critique on how I used flexbox appreciated as well)

http://jsfiddle.net/yv3Lw5gy/1/

relevant class:

.super-thing{
    height: 100px;
    width: 100px;
    background-color: white;
    margin:auto;
    box-shadow: 2px 1px 1px #000;
}

css flexbox

Solution 1:^[1]

The .body parent of .super-thing is display: flex so its children don't inherit its height or width if they don't have flex properties.

###The power of flex compels you!

Set flex: 1 on .super-thing so it grows and shrinks with a 1% margin to create a gap. There is no need for a width or height.

.super-thing {
  background-color: white;
  margin: 1%;
  box-shadow: 2px 1px 1px #000;
  flex: 1;
}

###Complete Example

In this example, the box-sizing: border-box and the removal of the margin to be replaced with padding on <body>, get the entire container properly sized in the viewport so 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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	danronmoon

'Flexbox child not reading height/width of parent

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]