Bootstrap 4 position fixed with width inherit not working

Question

I have content and sidebar:

.border {
   border: 1px solid black;
}

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <div id="app">
       <div class="container">
           <div class="row">
              <div class="col-md-7 col-lg-9 border">
                <div class="content">
                  .....
                  </div>
              </div>
              <div class="col-md-5 col-lg-3 border position-relative">
                 <div class="position-fixed border" style="    width: inherit;">
                   ....
                 </div>
              
              </div>
           </div>
           
       </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

In this example width of element position-fixed is not inherit of parent element. Why? I need get inherit width of parent element. If I set width: 20% then width is working on position fixed, but why width inherit is not working?

If you have an element, but it’s child has `position: fixed;`, the child element will be able to only inherit property values from elements above it that have a `position: relative;` make sure `.col-md-5.col-lg-3.border` has `position: relative;`. These are basic behavioural typicalities from the CSS property `position` — Derk Jan Speelman, Apr 06 '19 at 08:01
@DerkJanSpeelman I tried, not working.. Check please updated question — Mafys Grif, Apr 06 '19 at 08:08
@DerkJanSpeelman `inherit` doesn't conisder position, it only consider parent/child relation. So an element will always inherit from it's parent element in the DOM whataver position you set to both `Inheritance is always from the parent element in the document tree, even when the parent element is not the containing block.` (https://developer.mozilla.org/en-US/docs/Web/CSS/inherit) — Temani Afif, Apr 06 '19 at 09:18

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

It's working fine but you need to note that position:fixed has its width relative to the viewport. So if you set 20% to the parent, the fixed element will inherit 20% and will not inherit the calculated pixel value of its parent element width.

So both element will have 20% but not both of them have the same reference for the percentage (i.e. not both of them have the same containing block)

The inherit CSS keyword causes the element for which it is specified to take the computed value of the property from its parent element. ^ref

... However, for some properties (those where percentages are relative to something that may require layout to determine, such as width, margin-right, text-indent, and top), percentage-specified values turn into percentage-computed values. ^ref

Here is a basic example to illustrate:

.box {
  border:2px solid red;
  min-height:50px;
  width:100%;
}
.box > div {
  position:fixed;
  width:inherit;
  min-height:50px;
  border:2px solid green;
  left:0;
}

body {
  padding:0 100px;
}

<div class="box">
  <div></div>
</div>

In the below example, both element are having width:100%. The fixed element is having 100% width of the viewport while the static element is having 100% of the body width minus padding.

The position and size of an element's box(es) are sometimes calculated relative to a certain rectangle, called the containing block of the element. The containing block of an element is defined as follows:

...

For other elements, if the element's position is 'relative' or 'static', the containing block is formed by the content edge of the nearest block container ancestor box.

If the element has 'position: fixed', the containing block is established by the viewport in the case of continuous media or the page area in the case of paged media. ^ref

Another thing to note is that you are not setting any left value in your code which is confusing and will make your think the width of the fixed element isn't correct but you are simply having an overflow.

Here is the pervious code without left:

.box {
  border:2px solid red;
  min-height:50px;
  width:100%;
}
.box > div {
  position:fixed;
  width:inherit;
  min-height:50px;
  border:2px solid green;
}

body {
  padding-left:100px;
}

<div class="box">
  <div></div>
</div>

We may think that the fixed element has the same width as the static one, but no. The fixed element is overflowing.

Related: Why aren't my absolutely-positioned elements located where I expect?

No. I have a bootstrap grid system, there not a fixed width. Bootstrap grid use a flexbox. I can't set width to a fixed element, becuase I don't know this width of parent element. See please my example. And bootstrap grid not use width, it use: max-width: 25% — Mafys Grif, Apr 06 '19 at 08:19
@MafysGrif no what? who talked about fixed width? and I know you have a grid system and I am explaining *why it's not working*. Check the width of the parent element and you will see it's set to `width:100%` by the grid system — Temani Afif, Apr 06 '19 at 08:22
@MafysGrif check well all the styles and you will find `width:100%` for all of the classes. and to confirm what I said add `left:0` to the fixed element adn you will see it's always 100% — Temani Afif, Apr 06 '19 at 08:30
Yep, you right. left: 0 working on 100%; But how I can resolve my problem? What I need do for inherit column sidebar? I need in position-fixed get width of sidebar, but not 100%.. — Mafys Grif, Apr 06 '19 at 08:34
@MafysGrif you cannot inherit the *computed value* width CSS. Either rethink your layout or consider some JS to do it — Temani Afif, Apr 06 '19 at 08:41

score 0 · Answer 2 · answered Dec 15 '20 at 06:56

0

for me i calculate percent of wanted col to be fixed then set it to css by width percent for example if want fixed element to be col-md-2 this meaning you will set width in css to 2/12 = 16% !important; like this

.fixedelement{width:16% !important;}

answered Dec 15 '20 at 06:56

Akram Elhaddad

194
3
7

Bootstrap 4 position fixed with width inherit not working

2 Answers2

Linked