在 <div> 中使用“display: flex; flex-direction: row” 设置“width: auto”不起作用答案

【问题标题】：Setting "width: auto" inside a <div> with "display: flex; flex-direction: row" doesn't work在 <div> 中使用“display: flex; flex-direction: row” 设置“width: auto”不起作用
【发布时间】：2020-10-03 15:31:42
【问题描述】：

我正在尝试将一堆 div 并排放置，从左到右。所以我使用了一个方向设置为row的flexbox。

我希望这些 div 中的每一个都从里面的内容中导出它们的高度和宽度，因此我将它们的高度和宽度保留为默认值。

最后，我想使用 svg 作为背景。为此，我使用了一个网格容器并将 svg 和 div 放置在同一列和同一行中，正如 stackoverflow post 中所建议的那样。我将 svg 的高度和宽度设置为 100% 以确保它填满整个背景。

但是，当我将所有内容组合在一起时，div 的宽度设置不正确。 div 的高度似乎是由里面的内容设置的，但宽度似乎总是默认为300px。对于我的一生，我无法弄清楚这个宽度是如何计算的。如果内容比300px 更宽，那么一切都按预期工作。但是如果内容小于300px，则容器永远不会缩小以适应。

如何确保 div 始终缩小以适应？请参阅下面的代码示例：

.top {
  padding: 20px;
  display: flex;
  flex-direction: row;
}

.grid-container {
  background-color: red;
  display: grid;
}

.svg {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  height: 100%;
}

.content {
  grid-column: 1;
  grid-row: 1;
  font-size: 100px;
}

This div has calculated width 300px for some reason
<div class="top">
  <div class="grid-container" key="1">
    <svg class="svg" viewBox="-10 -10 20 20" preserveAspectRatio="none">
      <polygon strokeWidth="0" fill="yellow" points="0,-10 10,0 0,10 -10,0" />
    </svg>
    <div class="content">
      ab
    </div>
  </div>
  <!-- more grid-containers -->
</div>

This works as expected
<div class="top">
  <div class="grid-container">
    <svg class="svg" viewBox="-10 -10 20 20" preserveAspectRatio="none">
      <polygon strokeWidth="0" fill="yellow" points="0,-10 10,0 0,10 -10,0" />
    </svg>
    <div class="content">
      abcdefghijkl
    </div>
  </div>
  <!-- more grid-containers -->
</div>

【问题讨论】：

标签： html css svg flexbox css-grid

【解决方案1】：

创建此输出的 SVG 元素应用了默认宽度/高度。为避免此问题，请确保将属性宽度/高度设置为 0

.top {
  padding: 20px;
  display: flex;
  flex-direction: row;
}

.grid-container {
  background-color: red;
  display: grid;
}

.svg {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  height: 100%;
}

.content {
  grid-column: 1;
  grid-row: 1;
  font-size: 100px;
}

This div has calculated width 300px for some reason
<div class="top">
  <div class="grid-container" key="1">
    <svg class="svg" viewBox="-10 -10 20 20" preserveAspectRatio="none" width="0" height="0">
      <polygon strokeWidth="0" fill="yellow" points="0,-10 10,0 0,10 -10,0" />
    </svg>
    <div class="content">
      ab
    </div>
  </div>
  <!-- more grid-containers -->
</div>

This works as expected
<div class="top">
  <div class="grid-container">
    <svg class="svg" viewBox="-10 -10 20 20" preserveAspectRatio="none" width="0" height="0">
      <polygon strokeWidth="0" fill="yellow" points="0,-10 10,0 0,10 -10,0" />
    </svg>
    <div class="content">
      abcdefghijkl
    </div>
  </div>
  <!-- more grid-containers -->
</div>

【讨论】：

谢谢。我在这个doc 中发现，只有当viewBox 和width 属性都未设置时，svg 宽度才应该设置为300px，但情况似乎并非如此。即使设置了viewBox，宽度也会设置为300px。
@Cnoor0171 你是对的。我的回答不是很准确，但我指的是 viewBox 创建的内在维度。首先，您会注意到 Firefox 为您的代码提供了与 chrome 完全不同的输出，您不会看到 300px 的宽度，而是其他东西。我不确切知道浏览器做错了什么，Flexbox 和 CSS 网格也使计算更加复杂......但最后我知道将宽度/高度设置为 0 可以解决问题。如果我找到更好的解释，我可能会稍后更新。

【解决方案2】：

您可以尝试将 SVG 用作 .grid-container（内联或链接）的背景图像，因此您无需将其插入到每个 div中。 重要的是，SVG 必须有preserveAspectRatio = 'none':

.top {
  padding: 20px;
  display: flex;
  flex-direction: row;
}

.grid-container {
  background-color: red;
  display: grid;
  background-image: 
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='-10 -10 20 20' preserveAspectRatio='none'> <polygon strokeWidth='0' fill='yellow' points='0,-10 10,0 0,10 -10,0'/> </svg>");
  background-repeat: no-repeat;
  background-size: cover;
}

.content {
  grid-column: 1;
  grid-row: 1;
  font-size: 100px;
}

<div class="top">
  <div class="grid-container" key="1">
    <div class="content">
      ab
    </div>
  </div>
  <!-- more grid-containers -->
</div>

<div class="top">
  <div class="grid-container">
    <div class="content">
      abcdefghijkl
    </div>
  </div>
  <!-- more grid-containers -->
</div>

【讨论】：

【解决方案3】：

我可以通过将position: relative; 添加到.grid-container 和position: absolute; 到svg 然后给.content 一个z-index:1; 来解决这个问题

看这里：

.top {
  padding: 20px;
  display: flex;
  flex-direction: row;
}

.grid-container {
  background-color: red;
  display: grid;
  width: auto;
  position: relative;
}

.svg {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  height: 100%;
  position: absolute;
}

.content {
  grid-column: 1;
  grid-row: 1;
  font-size: 100px;
  z-index:1;
}

This div has calculated width 300px for some reason
<div class="top">
  <div class="grid-container" key="1">
    <svg class="svg" viewBox="-10 -10 20 20" preserveAspectRatio="none">
      <polygon id="diamond" strokeWidth="0" fill="yellow" points="0,-10 10,0 0,10 -10,0" />
    </svg>
    <div class="content">
      ab
    </div>
  </div>
  <!-- more grid-containers -->
</div>

This works as expected
<div class="top">
  <div class="grid-container">
    <svg class="svg" viewBox="-10 -10 20 20" preserveAspectRatio="none">
      <polygon strokeWidth="0" fill="yellow" points="0,-10 10,0 0,10 -10,0" />
    </svg>
    <div class="content">
      abcdefghijkl
    </div>
  </div>
  <!-- more grid-containers -->
</div>

【讨论】：