CSS将孩子增长到父母的最大宽度答案

【问题标题】：CSS grow child to parent's max widthCSS将孩子增长到父母的最大宽度
【发布时间】：2021-04-08 13:19:36
【问题描述】：

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

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

仅使用 CSS，是否有可能实现以下目标。

我有一个包含两列、主要内容区域和侧边栏的容器 div。侧边栏包含多个 div，用于包装不同侧边栏元素的内容。这些侧边栏元素的内容被设计为缩放到其父级的 100% 宽度，当父级具有固定宽度时有效，默认为容器的 25%。

我们需要的是侧边栏在其内容被隐藏时消失。每个侧边栏元素内的内容可以设置为display: none，但是当所有元素都隐藏时，侧边栏仍然占用空白空间。下面的示例使用 min-width: fit-content 和 25% 的最大宽度，之前它是固定大小，当内容被隐藏时，它可以很好地隐藏侧边栏，但侧边栏中的内容不会增长。有没有办法让.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%。

再次编辑：由于一些cmets，我将尝试再次解释这一点。

侧边栏有最小和最大宽度，它没有固定宽度，侧边栏会缩放以适应其中的内容。因为侧边栏没有固定宽度，所以基于 100% 父级宽度的元素不会像您预期的那样表现，而是侧边栏默认为我所知道的最小宽度，这是所需的最小宽度以适应内容。我不是在寻找这个，我希望侧边栏扩展到容器宽度的 25%，如果将此代码复制到文件中，您可以看到它（因为上面的 sn-p 将在较小的窗格中运行它实际上可能宽于 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%，所以不，上面的代码不能满足我的需要。

【问题讨论】：

我不确定我是否理解。您希望侧边栏的内容都具有父级的 100% 宽度，对吗？默认情况下，作为 div 元素的情况已经如此。如果包含块被display: none 隐藏，您还希望侧边栏隐藏，对吗？如果是这种情况，那么代码已经这样做了。有什么我想念的吗？
他们没有。如果您将该 HTML 代码复制到文件中并打开它，侧边栏会非常薄，仅是适合内容所需的最小宽度。我希望侧边栏占据最大宽度的 100%，将宽度设置为百分比并不基于最大宽度的大小。侧边栏的最大宽度为容器的 25%，但侧边栏不会占用太多空间。我希望内容宽度增长到需要这么多。如果我将侧边栏宽度显式设置为 25%，它看起来不错，但在侧边栏为空时不会消失。
谁编辑了这篇文章？我故意不希望第二个代码块成为 sn-p，因为它在此无法正常运行，请注意高度不是画布的 100%，除非您将其扩展为全屏然后画布太小看不出问题。我发布该代码的目的是为了让人们将其复制并粘贴到文件中，以查看上面的截图是否不起作用。我什至直接在 sn-p 上面说了这个...@j08691
我认为“侧边栏将缩放以适应其中的内容”的假设是完全错误的。正如您在样式表中所述，侧边栏 (#sidebarArea) 将占据其父宽度的 25%，这就是我在上面的 sn-p 中看到的。在我看来很好！我很难理解你的问题。如果你想在内容为空时隐藏侧边栏，不要给它一个宽度或高度，让它的孩子确定 fixed 大小（看百分比是行不通的）。这样，如果没有内容，侧边栏就会消失
只需运行代码...您可以看到它没有，IO 不理解所有这些 cmets 在我想要的时候说它，当您可以查看自己并看到 NO 时。 25% 是最大宽度。除非它包含的内容那么宽，否则侧边栏区域不会自动变得那么大。运行上面的代码 sn-p 展开或全页，然后查看侧边栏是否占据页面的 25%，因为它没有，你会看到它只占用了适合内容所需的量.这不需要猜测，你可以自己运行它。

标签： html css

【解决方案1】：

我找到了一种方法，填充可用。

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

一旦完成，#sidebarArea 上的最小宽度就可以被移除了。

* {
    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>

【讨论】：