Flexbox nested container not expanding to fill parent in safari

Question

I am trying to make a nested 100% screen layout but I am running into a problem where the nested container does not fill 100% of the space of the parent cell in safari, even tho the cell itself does expand to fill all the available space. If I make the subContainer the actual flex cell as well it works, but I can´t do that for practical reasons. Any ideas?

jsfiddle

HTML:

<div id="masterContainer">
  <div id="header">
    header
  </div>

   <div id="content">

    <div id="subContainer">
      <div id="left">
        left
      </div>
      <div id="right">
        right
      </div>
    </div>

   </div>

</div>

CSS:

#masterContainer {

  display: flex;
  flex-direction: column;
  width: 200px;
  height: 200px;
}

#header {

  background: yellow;
}

#content {

  background: grey;
  flex: 1;
}

#subContainer {

  display: flex;
  width: 100%;
  height: 100%;
}

#left {

  background: red;
  width: 50;
}

#right {

  background: green;
  flex: 1;
}

Pete: Detailed explanation: because I´m doing this in react-router with inline styles and then I can´t change the styles of #subContainer which is a variable child without cloning it. — Piotr, Feb 07 '17 at 09:14
Pete: in react that´s not possible without cloning the component or having an external stylesheet and I don´t want to have an external stylesheet. — Piotr, Feb 07 '17 at 09:20
Why don't you set `.content` to `flex: 1;` instead of `flex: 1 0 auto;`? Do you want this to fill vertically? — Jose Paredes, Feb 07 '17 at 09:27
@joseAPL That worked for chrome but not safari. Updating the question to reflect that. — Piotr, Feb 07 '17 at 09:29

score 1 · Answer 1 · edited May 23 '17 at 12:24

This is a workaround for this problem in Safari.
Since Safari seems to avoid calculation for non-flex nested containers.

Take a look to this answer

#masterContainer {
  
  display: flex;
  flex-direction: column;
  width: 200px;
  height: 200px;
}

#header {
  
  background: yellow;
}

#content {
  background: grey;
  flex: 1;
  position: relative;
}

#subContainer {
  display: flex;
  width: 100%;
  height: 100%;
  position: absolute;
}

#left {
  
  background: red;
  width: 50px;
}

#right {
  
  background: green;
  flex: 1;
}

<div id="masterContainer">
  <div id="header">
    header
  </div>
    
   <div id="content">
    
    <div id="subContainer">
      <div id="left">
        left
      </div>
      <div id="right">
        right
      </div>
    </div>
   
   </div>
   
</div>

Flexbox nested container not expanding to fill parent in safari

1 Answers1