I am trying to make a child div appear as wide as its grandparent. My desired effect is similar to the one desired in this question, but with the key difference that the grandparent is not the width of the viewport; instead, it is determined dynamically.
<div class="outer">
<div class="content">
<div class="inner">
</div>
</div>
</div>
In my example below, the green .inner div should appear as wide as the .content div, whose width is dynamically calculated by the flexbox <body>. Ideally the text wrapping would be the same in the .inner and .content divs. I also want the inner to remain in the document flow, or at least appear to be. The inner div is generated by a Markdown converter, so it's not easy to edit the content/inner relationship.
How do I make the inner div appear as wide as its grandparent? I would strongly prefer a pure-CSS solution.
Here are some things that do not work:
Absolutely positioned
.innerdiv (withleft:0; right:0;), with the.outerdiv markedposition: relativeto make it the containing box. This almost works but it removes the inner element from the flow.Setting the inner element's width to
100vwand shifting it around. There's no way to access the result of the automatic width calculation, so in addition to being very hard to reason about, this also causes problems when scrollbars appear.
body {
display: flex;
}
.sidebar {
flex: initial;
width: 9rem;
text-align: center;
background: lightblue;
}
.outer {
flex: 1;
}
.content {
max-width: 15rem;
margin-left: 1rem;
margin-right: 1rem;
padding-left: 1rem;
padding-right: 1rem;
}
.inner {
background: lightgreen;
padding-top: 1rem;
padding-bottom: 1rem;
margin-top: 1rem;
margin-bottom: 1rem;
}<html><body><div class="sidebar">sidebar</div><div class="outer"><div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<div class="inner">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div></div></body></html>