CSS将子元素扩展到父元素的最大宽度

Question

有很多关于如何使父元素的宽度与子元素相同的问题被建议为类似的问题，但这不是我想要的。

我正在为品牌目的设计软件主题，我不能控制软件，只能访问CSS修改，因此JavaScript或修改DOM是不可能的，否则这将是微不足道的。

仅使用CSS，是否可以实现以下效果。

我有一个包含两列、主内容区域和侧边栏的容器div。侧边栏包含多个包装不同侧边栏元素内容的divs。这些侧边栏元素的内容被设计为按其父元素的100%宽度缩放，当父元素具有固定宽度时，即默认情况下为容器的25%时，它们可以正常工作。

我们需要的是当侧栏内容隐藏时，侧栏消失。虽然可以将每个侧边栏元素中的内容设置为display: none，但当所有元素都隐藏时，侧边栏仍占用空白空间。以下示例使用了min-width: fit-content和25%的max宽度，这是之前固定大小的尺寸，这对于隐藏侧边栏时效果很好，但是侧边栏中的内容不会增长。是否有一种方法使.sidebarElementWrapper内的内容增长以适应#sidebarArea的最大宽度？

* {
    margin: 0;
    box-sizing: border-box;
}

#container {
    height: 100%;
    display: flex;
    flex-direction: row;
}
#contentArea {
    width: 100%;
    background: #A84652;
}
#sidebarArea {
    max-width: 25%;
    min-width: fit-content;
    background: #4262C2;
}
.sidebarElement {
    width: 100%;
    padding: 12px;
    background: #8b8b8b;
    border-bottom: 1px solid #2c2c2c;
}

<div id="container">
    <div id="contentArea">
    </div>
    <div id="sidebarArea">
        <div class="sidebarElementWrapper">
            <div class="sidebarElement">Sidebar Element 1</div>
        </div>
        <div class="sidebarElementWrapper">
            <div class="sidebarElement">Sidebar Element 2</div>
        </div>
    </div>
</div>

为了隐藏侧边栏元素的内容，需将.sidebarElement设置为display: none，而不是其包装器。需要注意的是，由于包装器仍然存在且内容未被删除，只是被隐藏，所以:empty伪选择器也无法起作用。

编辑：为了澄清，当内容被隐藏后，侧边栏应消失，无论是通过display:none、宽度或其他机制实现的。当有侧边栏内容时，应占容器宽度的25%。

再次编辑：由于一些评论，我将尝试再次解释这个问题。

侧边栏具有最小和最大宽度，没有固定宽度，将根据其内部内容进行缩放。由于侧边栏没有固定宽度，基于父元素100%宽度的元素不会像您期望的那样运行，相反，从我所能看到的情况来看，侧边栏默认使用最小宽度，即适合内容所需的最小宽度。我不想要这个效果，我希望侧边栏扩展到容器宽度的25%，如果您将此代码复制到文件中（因为上面的片段可能在较小的窗格中运行，宽度可能超过25%，因此可能不具有代表性）。

* {
  margin: 0;
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 100%;
}

#container {
  height: 100%;
  display: flex;
  flex-direction: row;
}

#contentArea {
  width: 100%;
  background: #A84652;
}

#sidebarArea {
  max-width: 25%;
  min-width: fit-content;
  background: #4262C2;
}

.sidebarElement {
  width: 100%;
  padding: 12px;
  background: #8b8b8b;
  border-bottom: 1px solid #2c2c2c;
}

<div id="container">
  <div id="contentArea">
  </div>
  <div id="sidebarArea">
    <div class="sidebarElementWrapper">
      <div class="sidebarElement">Sidebar Element 1</div>
    </div>
    <div class="sidebarElementWrapper">
      <div class="sidebarElement">Sidebar Element 2</div>
    </div>
  </div>
</div>

最终，我有一个带有最小和最大宽度的 div，并且一个子元素使用百分比。百分比宽度（即 width:100%）不会将子元素缩放到元素的最大宽度，而是相对于当前宽度的 100%，因此，上述代码不能实现我需要的效果。

- D3_JMultiply

---

我不确定我的理解是否正确。你希望侧边栏的内容都具有父元素100%的宽度，是吗？这已经默认是div元素的情况。您还希望如果包含块使用display：none隐藏，则侧边栏也会隐藏，对吗？如果是这种情况，那么代码已经实现了这一点。我有遗漏什么吗？ - Linek

然而它们确实不这样做。如果您将HTML代码复制到文件中并打开它，侧边栏非常窄，只有最小宽度才能适应内容。我想侧边栏占据最大宽度的100％，将宽度设置为百分比不是基于最大宽度的大小。侧边栏的最大宽度为容器宽度的25％，但是侧边栏不会占用那么多的空间。我希望内容宽度增长以使其占用那么多的空间。如果将侧边栏宽度明确设置为25％，则看起来很好，但是当侧边栏为空时不会消失。 - D3_JMultiply

谁编辑了这篇文章？我故意不想让第二个代码块成为片段，因为它在这里无法正常运行，注意高度不是画布的100％，除非您将其扩展或全屏运行，否则画布太小而无法看到问题。我发布了那段代码，是为了让人们将其复制并粘贴到文件中查看，如果上面的片段无法工作。我甚至在片段上面直接说了这一点... @j08691 - D3_JMultiply

我认为“侧边栏将按比例缩放以适应其中的内容”的假设是完全错误的。正如您在样式表中所述，侧边栏（#sidebarArea）将占据其父元素宽度的25％，这就是我在上面的片段中看到的。对我来说看起来很好！我很难理解您的问题...如果您想在侧边栏内容为空时隐藏它，请不要给它宽度或高度，并让它的子元素确定固定大小（使用百分比不起作用）。这样，如果侧边栏没有内容，它将消失。 - Alen Androsevic

如果我移除min-width: fit-content，它会变得更窄，甚至小到实际示例中的文本换行，数字移到下一行。所以不，那样并不能解决问题。无论我将min-width设置为什么值，侧边栏最终都会成为那个尺寸。这不好，因为fit-content无法让侧边栏达到其最大宽度，除非内容宽度够大，但是设置任何不基于内容的值意味着侧边栏永远不会消失。 - D3_JMultiply

Answer 1

我找到了一种方法，使用fill-available。

.sidebarElement {
    width: 100vw;
    ...
    max-width: fill-available;
    max-width: stretch;
    max-width: -webkit-fill-available;
    max-width: -moz-available;
}

一旦完成这个步骤，可以移除 #sidebarArea 上的 min-width 属性。

* {
    margin: 0;
    box-sizing: border-box;
}

html,body {
    width: 100%;
    height: 100%;
}

#container {
    height: 100%;
    display: flex;
    flex-direction: row;
}
#contentArea {
    width: 100%;
    background: #A84652;
}
#sidebarArea {
    max-width: 25%;
    background: #4262C2;
}
.sidebarElement {
    width: 100vw;
    padding: 12px;
    background: #8b8b8b;
    border-bottom: 1px solid #2c2c2c;

    max-width: fill-available;
    max-width: stretch;
    max-width: -webkit-fill-available;
    max-width: -moz-available;
}

<body>
    <div id="container">
        <div id="contentArea">

        </div>
        <div id="sidebarArea">
            <div class="sidebarElementWrapper">
                <div class="sidebarElement">Sidebar Element 1</div>
            </div>
            <div class="sidebarElementWrapper">
                <div class="sidebarElement">Sidebar Element 2</div>
            </div>
        </div>
    </div>
</body>

- D3_JMultiply