html - 最小宽度在 flex-direction : row and flex-direction: column 上呈现不同

Question

我有一个带有 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/

如果您减小屏幕尺寸，第 3 行不会像其他行那样使用react。

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

但是使用我不理解的东西让我很困扰 ^^。

如果有人可以向我解释为什么会出现该错误，为什么该行修复它，以及是否有更好的方法来避免该问题，那就太好了。

Answer 1

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

更具体地说，这些是 flex 元素的初始设置:

• min-width: auto(适用于flex-direction: row)
• min-height: auto(适用于flex-direction: column)

更具体地说，看看规范语言:

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.

换句话说，最小尺寸算法仅适用于主轴。

您在列方向容器中的输入元素未获得 min-width: auto – because the main axis is vertical在那些情况下——所以它们会收缩并且不会溢出容器。您可以在第二个输入元素上看到这种行为。查看此 demo 时缩小屏幕尺寸.

同样的事情发生在第三个输入上，它是具有 flex-direction: column 的嵌套 flex 容器的子容器... EXCEPT，这个列方向容器也是一个 flex item of larger container with flex-direction: row。

这意味着嵌套容器的主轴是水平的并且 min-width: auto 适用。因此，这个 flex 元素不会缩小到输入的固有宽度以下。有关插图，请参阅相同的 demo从上面看。

因此，您需要使用 min-width: 0 或 overflow: hidden ( demo ) 覆盖此默认值。

并且出于上述原因，包含在嵌套行方向 flex 容器中的第四个输入也需要覆盖 min-width: auto ( demo )。

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