CSS - Issue with fill-avaliable

Question

I have a sidebar on the left which is fixed (width: 400px) and content on the right which should contain the rest of the space. While using fill-available: the sidebar changes its width to 309px.

Why doesn't fill-available work properly? Is there a possibility to set content in the remained space?

Please find the codepen here: https://codepen.io/ullaakut/pen/eQxbvY

Thanks!

duplicate of : https://stackoverflow.com/questions/37745051/make-div-fill-remaining-horizontal-space-in-flexbox in case you simply want the result .. but an answer to how fill-available would be more intresting — Temani Afif, Dec 02 '18 at 11:24

score 2 · Accepted Answer · answered Dec 02 '18 at 11:10

As here

fill-available ???. One of life's great mysteries

You can use calc (400px of sidebar width + padding=480px)

body {
  display: flex;
  height: 100vh;
}

#sidebar {
  width: 400px;
  height: 100%;
}

#content {
   width: calc(100% - 480px);
}

/* Just style related CSS rules, deleting those does not fix the problem. This is just to make the codepen clearer. */

body {
  color: white;
  font-size: 14pt;
  margin: 0;
}

#sidebar {
  padding: 20px;
  background: #3c3c3c;
}

#content {
  padding: 20px;
  background: grey;
}

<body>
  <div id="sidebar">This should be exactly 400 pixels but it is 336.83px</div>
  <div id="content">This should fill the available space and not take space over the sidebar</div>
</body>

we are using flexbox, so flex-grow should be better than calc — Temani Afif, Dec 02 '18 at 11:19

score 0 · Answer 2 · answered Dec 02 '18 at 11:16

fill-avaible is something that have different behaver in different browser but if you add width: 100% before it can be used from that browser that don't support it.

body {
  display: flex;
  height: 100vh;
}

#sidebar {
  width: 400px;
  height: 100%;
}

#content {
  width: 100%;
  width: -moz-available;
  width: -webkit-fill-available;
  width: fill-available;
}

/* Just style related CSS rules, deleting those does not fix the problem. This is just to make the codepen clearer. */

body {
  color: white;
  font-size: 14pt;
  margin: 0;
}

#sidebar {
  padding: 20px;
  background: #3c3c3c;
}

#content {
  padding: 20px;
  background: grey;
}

<body>
  <div id="sidebar">This should be exactly 400 pixels but it is 336.83px</div>
  <div id="content">This should fill the available space and not take space over the sidebar</div>
</body>

Tried but it doesn't work so well.. I got the answer above. Thanks though! :) — Norah Jones, Dec 02 '18 at 11:20

CSS - Issue with fill-avaliable

2 Answers2