Establezca un div fijo al 100% del ancho del contenedor principal

Tengo una envoltura con algo de relleno, luego tengo un div relativo flotante con un ancho de porcentaje (40%).

Dentro del div relativo flotante tengo un div fijo que me gustaría del mismo tamaño que su padre. Entiendo que un div fijo se elimina del flujo del documento y, como tal, ignora el relleno del envoltorio.

HTML

<div id="wrapper">
  <div id="wrap">
    Some relative item placed item
    <div id="fixed"></div>
  </div>
</div>

CSS

body { 
  height: 20000px 
}  
#wrapper {
  padding: 10%;
}  
#wrap { 
  float: left;
  position: relative;
  width: 40%; 
  background: #ccc; 
} 
#fixed { 
  position: fixed;
  width: inherit;
  padding: 0px;
  height: 10px;
  background-color: #333;
}

Aquí está el violín obligatorio: http://jsfiddle.net/C93mk/489/

¿Alguien sabe de una manera de lograr esto?

He modificado el violín para mostrar más detalles sobre lo que estoy tratando de lograr, perdón por la confusión: http://jsfiddle.net/EVYRE/4/

Puede usar el margen para el contenedor .wrap en lugar del relleno para .wrapper:

body{ height:20000px }
#wrapper { padding: 0%; }
#wrap{ 
    float: left;
    position: relative;
    margin: 10%;
    width: 40%; 
    background:#ccc; 
}
#fixed{ 
    position:fixed;
    width:inherit;
    padding:0px; 
    height:10px;
    background-color:#333;    
}

jsfiddle

¿Qué tal esto ?

$( document ).ready(function() {
    $('#fixed').width($('#wrap').width());
});

Al usar jquery puede establecer cualquier tipo de ancho :)

EDITAR: Como dice Dream en los comentarios, usar JQuery solo para este efecto es inútil e incluso contraproducente. Hice este ejemplo para las personas que usan JQuery para otras cosas en sus páginas y consideran usarlo también para esta parte. Pido disculpas por cualquier inconveniente causado por mi respuesta.

Intente agregar una transformación al padre (no tiene que hacer nada, podría ser una traducción cero) y establezca el ancho fijo del niño al 100%

body{ height:20000px }
#wrapper {padding:10%;}
#wrap{ 
    float: left;
    position: relative;
    width: 40%; 
    background:#ccc; 
    transform: translate(0, 0);
}
#fixed{ 
    position:fixed;
    width:100%;
    padding:0px;
    height:10px;
    background-color:#333;
}

<div id="wrapper">
    <div id="wrap">
    Some relative item placed item
    <div id="fixed"></div>
    </div>
</div>

Puede usar el posicionamiento absoluto para fijar el pie de página a la base del div principal. También agregué 10px padding-bottom a la envoltura (coincida con la altura del pie de página). El posicionamiento absoluto es relativo al div padre en lugar de fuera del flujo, ya que ya le ha dado el atributo relativo de posición.

body{ height:20000px }
#wrapper {padding:10%;}
#wrap{ 
    float: left;
    padding-bottom: 10px;
    position: relative;
    width: 40%; 
    background:#ccc; 
}
#fixed{ 
    position:absolute;
    width:100%;
    left: 0;
    bottom: 0;
    padding:0px;
    height:10px;
    background-color:#333;

}

http://jsfiddle.net/C93mk/497/

hombre, tu contenedor es el 40% del ancho del elemento principal

pero cuando usa position: fixed, el ancho se basa en el ancho de la ventana gráfica (documento) ...

pensando, me di cuenta de que su elemento principal tiene un 10% de relleno (izquierda y derecha), significa que su elemento tiene el 80% del ancho total de la página. por lo que su elemento fijo debe tener un 40% basado en el 80% del ancho total

por lo que solo necesita cambiar su clase #fixed a

#fixed{ 
    position:fixed;
    width: calc(80% * 0.4);
    height:10px;
    background-color:#333;
}

si usa sass, postcss u otro compilador css, puede usar variables para evitar romper el diseño cuando cambia el valor de relleno del elemento padre.

aquí está el violín actualizado http://jsfiddle.net/C93mk/2343/

espero que ayude, saludos

Además de tu último jsfiddle , te perdiste una cosa:

#sidebar_wrap {
  width:40%;
  height:200px;
  background:green;
  float:right;
}
#sidebar {
  width:inherit;
  margin-top:10px;
  background-color:limegreen;
  position:fixed;
  max-width: 240px; /*This is you missed*/
}

Pero, ¿cómo solucionará esto tu problema? Simple, expliquemos primero por qué es más grande de lo esperado.

El elemento fijo #sidebarusará el tamaño del ancho de la ventana como base para obtener su propio tamaño, como cualquier otro elemento fijo, una vez que este elemento esté definido width:inherity #sidebar_wraptenga un 40% como valor en ancho, luego calculará window.width * 40%, luego, si el ancho de su ventana es mayor que su .containerancho, #sidebarserá mayor que #sidebar_wrap.

De esta manera, debe establecer un ancho máximo en su #sidebar_wrap, para evitar que sea mayor que #sidebar_wrap.

Verifique este jsfiddle que muestra un código de trabajo y explique mejor cómo funciona.

Elimina Padding: 10%;o usa px en lugar del porcentaje para.wrap

vea el ejemplo: http://jsfiddle.net/C93mk/493/

HTML:

<div id="wrapper">
    <div id="wrap">
    Some relative item placed item
    <div id="fixed"></div>
    </div>
</div>

CSS:

body{ height:20000px }
#wrapper {padding:10%;}
#wrap{ 
    float: left;
    position: relative;
    width: 200px; 
    background:#ccc; 
}
#fixed{ 
    position:fixed;
    width:inherit;
    padding:0px;
    height:10px;
    background-color:#333;

}