将“宽度:自动"设置为在< div>内与"display:flex;flex-direction:row"不起作用 [英] Setting "width: auto" inside a <div> with "display: flex; flex-direction: row" doesn't work

问题描述

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

I'm trying to place bunch of divs side by side, left to right. So I'm using a flexbox with direction set to row.

我希望每个div都从内部内容中获取其高度和宽度，因此我将其高度和宽度保留为默认值.

I want each of those divs to derive their height and width from the content inside, hence I have left their height and width to default.

最后，我想使用svg作为背景.为此，我正在使用网格容器，并将svg和div都放在此 stackoverflow帖子中建议的同一列和同一行中.我将svg的高度和宽度设置为 100％，以确保其填充整个背景.

Lastly, I want to use an svg as the background. For that, I'm using a grid container and placing both the svg and the div in the same column and row as suggested in this stackoverflow post. Im setting the height and width of the svg to 100% to ensure it fills the whole background.

但是，当我将所有内容组合在一起时，div的宽度设置不正确.div的高度似乎由内部内容设置，但宽度似乎始终默认为 300px .为了我的一生，我不知道该宽度是如何计算的.如果内容宽于 300px ，则一切正常.但是如果内容小于 300px .

When I combine everything together, though, the width is of the divs are not being set properly. The height of the div seems to be set by the content inside, but the width seems to always default to 300px. For the life of me, I cant figure out how this width is being calculated. If the content is wider than 300px, then everything works as expected. But the container never shrinks to fit if the content is smaller than 300px.

我如何确保div总是缩小以适合?请参见下面的代码示例:

How can I makes sure the divs are always shrunk to fit? See the code sample below:

.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>

推荐答案

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

There is a default width/height applied to SVG element creating this output. To avoid the issue make sure you set the attribute width/height to 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>

这篇关于将“宽度:自动"设置为在< div>内与"display:flex;flex-direction:row"不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！