英文:
How do I make a child div as wide as its dynamically sized grandparent?
问题
我正在尝试使子 div 的宽度与其祖父元素一样宽。我希望实现的效果类似于this question中所期望的效果，但关键区别在于祖父元素的宽度不是视口的宽度；相反，它是动态确定的。
在下面的示例中，绿色的 .inner div 应该与 .outer div 一样宽，而其宽度由 flexbox <body> 动态计算。理想情况下，文本包装在 .inner 和 .content div 中应该相同。我还希望 inner 保持在文档流中，或者至少看起来是这样。inner div 是由Markdown转换器生成的，所以很难编辑内容/inner关系。
如何使 inner div 看起来与其祖父元素一样宽？ 我强烈希望使用纯CSS解决方案。
以下是一些不起作用的方法：
-
绝对定位的
.innerdiv（使用left:0; right:0;），并将.outerdiv 标记为position: relative以使其成为包含框。这几乎可以工作，但它会将 inner 元素从文档流中删除。 -
将 inner 元素的宽度设置为
100vw并将其移动。无法访问自动宽度计算的结果，因此除了非常难以理解之外，当出现滚动条时，这也会导致问题。
下面是示例代码：
<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>
以下是相关的CSS样式：
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;
}
英文:
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 .outer 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.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
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;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
答案1
得分: 2
这是display: contents的作用（更多信息），但是浏览器支持有些有限。您可以尝试为不支持的浏览器提供回退样式（在您的CSS中使用@supports），或者使用这个JS polyfill。
英文:
This is what display: contents does (more info), but browser support is a bit limited. You may be able to get by with fallback styles for non-supporting browsers (using @supports in your CSS), or with this JS polyfill.
答案2
得分: 0
将以下部分翻译为中文：
"不确定我是否理解您的问题正确，但是将以下代码添加到.inner类中是否会解决它，不会吗？
margin-left: -1rem;
margin-right: -1rem;
padding-left: 1rem;
padding-right: 1rem;
英文:
Not sure if I understood your question correct, but adding
margin-left: -1rem;
margin-right: -1rem;
padding-left: 1rem;
padding-right: 1rem;
to the .inner class would solve it, wouldn't it?
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论