Question

给出以下代码：

.outer-container {
  display: flex;
  justify-content: space-evenly;
}

.left-container {
  height: 300px;
}

.right-container {
  flex: 0 1 auto;
}

<div class='outer-container'>
  <div class='left-container'>Lefto</div>
  <div class='right-container'>Righto</div>
</div>

尽管flex-grow属性设置为0，正确的容器仍将变为300px高。如何防止这种情况发生？即，我希望正确的容器的高度只能与其内容一样高。

Codepen：https://codepen.io/MaxMillington2/pen/PxOwxo

Answer 1

在align-self: flex-start上添加.right-container

.outer-container {
  display: flex;
  justify-content: space-evenly;
}

.left-container {
  height: 300px;
  border: 1px solid blue;
}

.right-container {
  align-self: flex-start;
  border: 1px solid red;
}

<div class='outer-container'>
  <div class='left-container'>Lefto</div>
  <div class='right-container'>Righto</div>
</div>

注意：flex-grow，flex-shrink和flex-basis用于控制如何沿主轴填充空间。在这种情况下，主轴是左右移动的，因为默认情况下flex-direction设置为row。

align-items属性将使项目在交叉轴上对齐。此属性的初始值为stretch，这就是为什么弹性项目默认拉伸到最高项目的高度的原因。

MDN - Concepts of Flexbox

这就是为什么您需要将align-items或.outer-container上的align-self覆盖到flex子元素。

防止FlexChild成长

1 个答案: