CSS Width in Percent Related to The Grand Parent

CSS width in Percent related to the grand parent

You could simply relate width of li s to the parent ul which in turn it relates to the grand parent div:

div{
    overflow: hidden;
    width: 100%;
}
ul{
    width: 1000%;
}
li{
    width: 3%;
}

CSS width in Percent related to the grand parent

You could simply relate width of li s to the parent ul which in turn it relates to the grand parent div:

div{
    overflow: hidden;
    width: 100%;
}
ul{
    width: 1000%;
}
li{
    width: 3%;
}

CSS: give element same width as grandparent element

If the #supercontainer always has 100% width of window, you can match it by applying width: 100vw for the boxes

.fun-box {
  height:100%;
  float:left;
  width: 100vw; 
}

Viewport-percentage lengths defined a length relatively to the size of viewport, that is the visible portion of the document.

1vw =1/100th of the width of the viewport

-MDN

Make DIV 100% height of grandparent, while also stretching grandparent's width

The dry explanation:

make GP display: flex, because its child elements will be stretched due to CSS default align-items: stretch
this will stretch P to GP flexbox row height independed of flex-grow (= default: 0, as FBL parent is default 'row', a childs' flex-grow affects only the stretching of its width) => P height = GP height
Make C height: 100% as P now has a height C can reference (namely the height of GP). => C height: 100% = height P = height GP
GP width has to be C width dependend. As we don't know what P does, C cannot have a percentage width (which is parent depended), so either give C a viewport dependend unit vw/vh/vmin/vmax, or calc(...) a width, etc. or a fixed unit. In the snippet .C { width: 10vw; }
This will make C force its width upon P and, because of the align-items of GP, also upon GP

(...and you thought you were cryptic...)

Fortunately the snippet is heavily commented. BTW, I added some extra HTML/CSS to get something resembling a 'live' page. Also: I changed the IDs into classes.

.cardList { /* list of ... cards */
    background-color: rgba(0,0,0,.1); padding-top: 1rem
}
.card { /* some main container holding an R */
    position: relative; /* stacking context for .R */

    width: 40vw; /* some arbitrary width/height/spacing */
    height: calc(0.5265 * 40vw);
    margin-bottom: 1rem;
}

.R {
  display: flex;
  position: absolute;

  top   : 0;
  bottom: 0;
  left  : 0;
  right : 0;

/*  align-items: stretch; /* REMOVE, flex default */
}

.GA {
  flex-grow: 1;
  background-color: blue;
}

.GP {
/*  flex-grow: 0; /* REMOVE, flex default */

  /* ADD, make GP a flex-container so it has 'align-items: stretch'
          this will stretch P giving C a height it can reference
  */
  display: flex;

  background-color: red;
  padding: 15px;

  /* ADD [optional], but GP size will be limited by R,
     so, what to do when it overflows? Right, scrollbars (or ellipses..., w.e.)
     And excess content of C has to go somewhere as its height is GP depended
  */
  overflow: auto;
}

.P { /* CAN'T CHANGE THIS */ }

.C {

  /* ADD, with some test value */
  width: 10vw;
  /* Will force GP width as P has default 'width: auto; height: auto'.
     Has to be a 'hard' (relative or px) width to force P and therefore GP,
     percentages won't work as that would be based on parent */

  height: 100%;
  /* GP is flex with default 'align-items: stretch'
     this will stretch P
     if P is 'stretched' then C has a reference size, so it can go 100%
     which is full size of GP (minus GP padding, etc...)
  */

  background-color: yellow;
}

.some-content {
  width: 50px;
  height: 300px;
  background-color: green;
}

/**************************************/
/* my personal preferred global rules */
/**************************************/
html,body               { box-sizing: border-box; width: 100%; max-width: 100% }
*::before,*::after, *   { box-sizing: inherit }
body                    { margin: 0 }
/*

    All math reference:  https://www.mathsisfun.com/equation_of_line.html

*/
/* responsive base font size using y = mx + b */
html   { font-size: calc(0.625vmin + 0.75rem) } /* (320,14)(1280,20) */

[band] { display: flex; flex-flow: column wrap; 
         justify-content: center; align-content: center; align-items: center }

body[padded="1"],
body[padded="0"] [band*="padded"] {
/*
    responsive page padding
    and responsive band padding (same as responsive page padding, but at band level)
    p1(320,32) p2(1920, 72) => 0.025x + 24
    p3(320, 8) p4(1920,320) => 0.195x - 54.4 

    'Band padding' is only active when 'page padding' is off 
*/
    padding: calc( 2.5vh + 24px) calc(19.5vw - 54.4px);
}
/* for debugging */
[outlines="1"] * { outline: 1px dashed }

<body outlines="1" padded="1">
<div class="cardList" band>
    <div class="card">
        <div class="R">
          <div class="GA"></div>
          <div class="GP">
            <div class="P"> <!-- CAN'T CHANGE THIS ELEMENT-->
              <div class="C">
                <div class="some-content">
                </div> <!-- PACEHOLDER FOR CONTENT-->
              </div>
            </div>
          </div>
        </div>
    </div>
    <div class="card">
        <div class="R">
          <div class="GA"></div>
          <div class="GP">
            <div class="P"> <!-- CAN'T CHANGE THIS ELEMENT-->
              <div class="C">
                <div class="some-content">
                </div> <!-- PACEHOLDER FOR CONTENT-->
              </div>
            </div>
          </div>
        </div>
    </div>
</div>
</body>

CSS percentage positioning of parent not grandparent

The positioning context of a positioned element (absolute/relative/fixed/sticky - all except static) is the closest parent with position other than static (the default). Set position: relative on the li:

#cons > li
  position: relative
  width: 100%
  height: 50px
  background-color: #212121
  border-bottom: 1px solid white
  display: block

CSS Width in Percent Related to The Grand Parent

CSS width in Percent related to the grand parent

CSS width in Percent related to the grand parent

CSS: give element same width as grandparent element

Make DIV 100% height of grandparent, while also stretching grandparent's width

CSS percentage positioning of parent not grandparent

Related Topics

Leave a reply