CODEWITHSUNDEEP
htmlcssflexbox
Piotr
Piotr

Reputation: 4963

Flexbox nested container not expanding to fill parent in safari

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;
}

Upvotes: 0

Views: 979

Answers (1)

Jose Paredes
Jose Paredes

Reputation: 4080

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>

Upvotes: 1

Related Questions