最小宽度渲染不同地在flex-direction：row和flex-direction：column [英] min-width rendering differently in flex-direction: row and flex-direction: column

问题描述

我有一个容器 display：flex 和 flex-direction：row 。

在这个容器中有一个子容器，也有 display：flex ，但是 flex-direction：column 。

问题是如果我在子容器中添加一个输入， min-width 的输入将被忽略。

这是我在flexbox中尝试几个输入的代码：

  form {margin：100px;} div.flex_ctn {display：flex;} input {flex：1; min-width：40px;} div.column {flex-direction：column;} div.row {flex-direction：row;} div.sub_ctn {flex：1; / * min-width：40px; * /}  

  ; form> < div class =flex_ctn row> < input /> < / div> < div class =flex_ctn column> < input /> < / div> < div class =flex_ctn row> < div class =flex_ctn column sub_ctn> < input /> < / div> < / div> < div class =flex_ctn column> < div class =flex_ctn row sub_ctn> < input /> < / div> < / div>< / form>  

https://fiddle.jshell.net/s3gu32ku/2/

如果你减小屏幕尺寸，第三行不像其他行那样反应。

在css中，你会看到最后一行设置为注释。当该部分启用时，您只需重新加载，问题就消失了。很完美 ！我已经有解决方案！

但是麻烦我使用一些我不明白^^。

如果有人可以向我解释为什么会发生错误，为什么要修复它，以及是否有更好的方法来避免这个问题。 p>

解决方案

一般来说，flex项目默认情况下不能小于其内容的大小。

更具体地说，这些是flex项目的初始设置：

• min-width：auto （适用于 flex-direction：row ）


• code> min-height：auto （适用于 flex-direction：column ）

更具体地说，看看spec语言：

4.5。 Flex的默认最小大小
项

$ b $ p

为了提供更灵活的默认最小大小，
规范引入了一个新的 auto 值作为
的初始值 min-width 和 code $ b auto

在溢出为可见的弹性项目在主轴上，当在弹性项目的主轴min-size属性上指定
时，指定
自动最小大小。否则计算为 0 。

换句话说，





您在列方向容器中的输入元素不会得到 min-width ：auto – 因为主轴是垂直的在这些情况下–所以它们收缩并且不会溢出容器。您可以看到此行为在您的第二个输入元素上显示。在查看此演示时减小屏幕大小。

第三个输入也是同样的事情，它是一个嵌套的flex容器的子元素 flex-direction：column ... EXCEPT ，此列方向容器也是较大容器的弹性项目，其 flex-direction：row 。

这意味着嵌套容器的主轴是水平的，并且 min-width：auto 适用。因此，此flex项目不会收缩到输入的固有宽度以下。有关示例，请参阅上面的演示。

因此，您需要使用 min-width：0 或覆盖此默认值：overflow：hidden （ demo ）。

由于上述原因，包含在嵌套行方向弹性容器中的第四个输入也需要 min-width：auto 重写（ demo ）。

相关：为什么Flex项目缩小不会超过内容大小？

I have a container with display: flex and flex-direction: row.

In that container there is a sub-container also with display: flex but with flex-direction: column.

The problem is if I add an input in the sub-container, the min-width of that input will be ignored.

This is the code where I tried several cases of input in flexbox:

form {
  margin: 100px;
}
div.flex_ctn {
  display: flex;
}
input {
  flex: 1;
  min-width: 40px;
}
div.column {
  flex-direction: column;
}
div.row {
  flex-direction: row;
}
div.sub_ctn {
  flex: 1;
  /*min-width:40px;*/
}

<form>
  <div class="flex_ctn row">
    <input />
  </div>
  <div class="flex_ctn column">
    <input />
  </div>
  <div class="flex_ctn row">
    <div class="flex_ctn column sub_ctn">
      <input />
    </div>
  </div>
  <div class="flex_ctn column">
    <div class="flex_ctn row sub_ctn">
      <input />
    </div>
  </div>
</form>

https://fiddle.jshell.net/s3gu32ku/2/

If you reduce the screen size, the 3rd line doesn't react like the others.

In the css you will see that the last line is set as comment. When that part is enabled you just have to reload and the issue disappears. So, perfect ! I have got the solution!

But that bothers me to use something that I don't understand ^^.

This would be great if someone can explain to me why that error occurs, why that line fix it, and also if there a better way to avoid that issue.

解决方案

Generally speaking, flex items, by default, cannot be smaller than the size of their content.

More specifically, these are initial settings of flex items:

• min-width: auto (applies in flex-direction: row)
• min-height: auto (applies in flex-direction: column)

Even more specifically, take a look at the spec language:

4.5. Implied Minimum Size of Flex Items

To provide a more reasonable default minimum size for flex items, this specification introduces a new auto value as the initial value of the min-width and min-height properties defined in CSS 2.1.

auto

On a flex item whose overflow is visible in the main axis, when specified on the flex item's main-axis min-size property, specifies an automatic minimum size. It otherwise computes to 0.

In other words, the minimum sizing algorithm applies only on the main axis.

Your input elements in column-direction containers don't get min-width: auto – because the main axis is vertical in those cases – so they shrink and won't overflow the container. You can see this behavior play out on your second input element. Reduce the screen size while viewing this demo.

The same thing happens with the third input, which is a child of a nested flex container with flex-direction: column... EXCEPT, this column-direction container is also a flex item of larger container with flex-direction: row.

This means the main axis of the nested container is horizontal and min-width: auto applies. As a result, this flex item will not shrink below the intrinsic width of the input. For an illustration, see the same demo from above.

Therefore, you need to override this default with min-width: 0 or overflow: hidden (demo).

And for the reasons explained above, the fourth input, contained in a nested row-direction flex container, will also need to have min-width: auto overridden (demo).

Related: Why doesn't flex item shrink past content size?

这篇关于最小宽度渲染不同地在flex-direction：row和flex-direction：column的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！