问题：

Flexbox CSS行不收缩以适应容器内部

平航

2023-03-14

我有一个固定高度和宽度的flexbox容器，里面有一些灵活的行，每个行都包含SVG对象。

当我向一行添加更多SVG时，该行中的其他SVG将收缩以适应容器的宽度。但是，如果我添加更多行，它们不会收缩以适合容器，而是溢出。

我如何才能防止这种行为，而不是让行适当地收缩以适应容器内的情况？

示例代码（第一行显示水平收缩；请注意，下面两行溢出了div页面容器）：

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.row {
  flex: 1;
  flex-direction: row;
  display: flex;
  align-items: flex-start;
  width: 100%;
}

.div-page {
  display: flex;
  flex-direction: column;
  height: 420mm;
  padding: 10mm;
  overflow: hidden;
}

object {
  max-width: 25%;
  max-height: 100%;
}

<body style="width: 594mm;">
  <div class="div-page">
    <div class="row">
      <object data="https://upload.wikimedia.org/wikipedia/commons/5/59/Logo_test.svg" type="image/svg+xml" style=""></object>
      <object data="https://upload.wikimedia.org/wikipedia/commons/5/59/Logo_test.svg" type="image/svg+xml" style=""></object>
      <object data="https://upload.wikimedia.org/wikipedia/commons/5/59/Logo_test.svg" type="image/svg+xml" style=""></object>
      <object data="https://upload.wikimedia.org/wikipedia/commons/5/59/Logo_test.svg" type="image/svg+xml" style=""></object>
      <object data="https://upload.wikimedia.org/wikipedia/commons/5/59/Logo_test.svg" type="image/svg+xml" style=""></object>
      <object data="https://upload.wikimedia.org/wikipedia/commons/5/59/Logo_test.svg" type="image/svg+xml" style=""></object>
      <object data="https://upload.wikimedia.org/wikipedia/commons/5/59/Logo_test.svg" type="image/svg+xml" style=""></object>
    </div>
    <div class="row">
      <object data="https://upload.wikimedia.org/wikipedia/commons/5/59/Logo_test.svg" type="image/svg+xml" style=""></object>
      <object data="https://upload.wikimedia.org/wikipedia/commons/5/59/Logo_test.svg" type="image/svg+xml" style=""></object>
      <object data="https://upload.wikimedia.org/wikipedia/commons/5/59/Logo_test.svg" type="image/svg+xml" style=""></object>
      <object data="https://upload.wikimedia.org/wikipedia/commons/5/59/Logo_test.svg" type="image/svg+xml" style=""></object>
    </div>
    <div class="row">
      <object data="https://upload.wikimedia.org/wikipedia/commons/5/59/Logo_test.svg" type="image/svg+xml" style=""></object>
      <object data="https://upload.wikimedia.org/wikipedia/commons/5/59/Logo_test.svg" type="image/svg+xml" style=""></object>
      <object data="https://upload.wikimedia.org/wikipedia/commons/5/59/Logo_test.svg" type="image/svg+xml" style=""></object>
      <object data="https://upload.wikimedia.org/wikipedia/commons/5/59/Logo_test.svg" type="image/svg+xml" style=""></object>
    </div>
    <div class="row">
      <object data="https://upload.wikimedia.org/wikipedia/commons/5/59/Logo_test.svg" type="image/svg+xml" style=""></object>
      <object data="https://upload.wikimedia.org/wikipedia/commons/5/59/Logo_test.svg" type="image/svg+xml" style=""></object>
      <object data="https://upload.wikimedia.org/wikipedia/commons/5/59/Logo_test.svg" type="image/svg+xml" style=""></object>
      <object data="https://upload.wikimedia.org/wikipedia/commons/5/59/Logo_test.svg" type="image/svg+xml" style=""></object>
    </div>
    <div class="row">
      <object data="https://upload.wikimedia.org/wikipedia/commons/5/59/Logo_test.svg" type="image/svg+xml" style=""></object>
      <object data="https://upload.wikimedia.org/wikipedia/commons/5/59/Logo_test.svg" type="image/svg+xml" style=""></object>
      <object data="https://upload.wikimedia.org/wikipedia/commons/5/59/Logo_test.svg" type="image/svg+xml" style=""></object>
      <object data="https://upload.wikimedia.org/wikipedia/commons/5/59/Logo_test.svg" type="image/svg+xml" style=""></object>
    </div>
</body>

共有2个答案

顾光明

2023-03-14

您可以向对象元素添加flex:1。这意味着它占总宽度的一部分。

object {
  flex: 1;
}

茹高义

2023-03-14

通过改变来修正

.row {
  ...
  width: 100%
}

到

.row {
  ...
  max-width: 100%;
  min-width: 0;
  max-height: 100%;
  min-height: 0;
}

类似资料：

如何阻止Tkinter Frame收缩以适合其内容？

问题内容：这是给我麻烦的代码。如果我用标签注释掉行，则框架显示为正确的宽度。但是，添加标签似乎将框架缩小到标签的大小。有办法防止这种情况发生吗？问题答案：默认情况下，以及缩小或放大一个小部件，以适应其内容，这是你想要什么的时候99.9％。描述此功能的术语是“几何传播”。还有一个命令以打开几何传播或使用时关闭（和类似的一个为）。由于您使用的是pack，因此语法为：或也许，取决于您实际
在包装时使容器收缩以适合子元素

问题内容：我试图弄清楚flexbox的工作原理（理应工作吗？），如下所示：问题是，当有足够的空间容纳元素时，我会得到一个很好的紧身儿童，它们之间的间距均匀。（第一，顶部div块）但是，如果没有足够的空间并且儿童中的文字开始换行，则所有内容都会朝着怪异的方向前进- 儿童不再紧密贴合，即使在换行后，flex子童周围也有足够的空间，因为不再合适，实际上环绕操作实际上也没有机会工作（第二个div块）
NSTextField可调整大小以适应内容

我有定义了left、right和top约束的NSTextField（没有设置bottom约束）。我需要NSTextField增长，如果内容不能容纳在其中，并减少大小，如果有未使用的空间。现在我有了：如果NSTextField有多行文本或太多内容，它会以奇怪的行为自动扩展，而且NSTextField在窗口调整大小时不会减小自己的大小。在Swift上，我还没有找到任何简单的解决方案来解决这个问题（
收缩包装并居中放置行内块元素的容器

问题内容：我有几行要在行中居中放置的inline-block元素，我想水平居中。内联块元素都具有相同的固定大小，但我希望居中处理页面大小调整以及添加或删除元素。为了简化起见，我删除了html /css并删除了居中的尝试。如果您调整结果窗口的大小，以便第三个内联块元素下降，则容器将填充宽度，我们将得到以下结果：而不是这样：根据ptriek关于JavaScript解决方案的答案进行编辑： P
Flex项目不收缩小于其内容[重复]

我有一个为用户显示的元素列表，还有一个图标和两个按钮。到目前为止还不错，但我希望这个列表能够扩展到移动设备，并在必要时缩小。当列表中的文本太长时，会阻止页面收缩，并强制显示水平滚动条。我试图实现的是，长描述文本缩小，在末尾显示3个点（省略号）。容器元素显示为flex，文本容器具有flex收缩1，但它仍然拒绝收缩和溢出。有人能告诉我我做错了什么吗？为什么是拒绝收缩？是否有任何方法可以在必要时仅
缩放图像以适应画布

我有一个表单，允许用户上传图像。加载映像后，我们对其执行一些缩放，以便在将其传递回服务器之前减小其文件大小。为此，我们将其放置在画布上并在画布上进行操作。这段代码将在画布上呈现缩放后的图像，画布大小为320 x 240px： ... 哪里有帆布。宽度和画布。高度是图像高度和宽度x，是基于原始图像大小的比例因子。但当我使用代码时： ...我只得到画布上图像的一部分，在这种情况下是左上角。我需

Flexbox CSS行不收缩以适应容器内部

共有2个答案

相关问答

相关文章

相关阅读

相关工具

相关文档