flex-flow: column wrap无法拉伸父元素宽度问题咨询

嘿，我懂你碰到的这个坑了——当用flex-flow: column wrap做纵向换行布局时，弹性容器的宽度死活不肯自动拉伸来容纳换行后的列，对吧？咱们先拆解下你的代码，再一步步搞定这个问题。

先看看你原本的代码：

<!DOCTYPE html>
<html>
<head>
<style>
*{ margin: 0; padding: 0; }
.box{
  background: #f03;
  position: relative;
  display: inline-block;
  /* top:10px; */
  /* left: 10px; */
  padding: 20px;
}
.in{
  display: flex;
  align-items: center;
  flex-flow: column wrap;
  max-height: 300px;
  align-content: flex-start;
  justify-content: space-between;
}
.item{
  background: #fe3;
  width: 100px;
  margin-bottom: 20px;
  height: 100px;
}
.item:last-child{
  margin-left: 15px;
}
</style>
</head>
<body>
<div class="box">
  <div class="in">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>
</body>
</html>

问题根源 #

在flex-flow: column wrap布局中，弹性容器的主轴是垂直方向，交叉轴是水平方向。但flex布局默认不会让容器的宽度自动适配换行后的列数——它只会保持初始的宽度（这里因为.box是inline-block，.in的宽度默认由第一列的内容决定），导致后面换行的项目只能超出容器或者被挤压。

快速修复方案 #

给你的弹性容器.in加上width: fit-content属性，让容器的宽度自动收缩/扩展到刚好容纳所有内容的宽度：

.in{
  display: flex;
  align-items: center;
  flex-flow: column wrap;
  max-height: 300px;
  align-content: flex-start;
  justify-content: space-between;
  width: fit-content; /* 这行是关键 */
}

如果你需要兼容一些旧浏览器（比如IE），也可以直接给.in设置一个明确的宽度——比如你的item宽度是100px，最后一个item有15px的左间距，两列的总宽度就是100px + 15px + 100px = 215px，直接写死width: 215px也能解决问题，不过fit-content显然更灵活。

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
<style>
*{ margin: 0; padding: 0; }
.box{
  background: #f03;
  position: relative;
  display: inline-block;
  padding: 20px;
}
.in{
  display: flex;
  align-items: center;
  flex-flow: column wrap;
  max-height: 300px;
  align-content: flex-start;
  justify-content: space-between;
  width: fit-content;
}
.item{
  background: #fe3;
  width: 100px;
  margin-bottom: 20px;
  height: 100px;
}
.item:last-child{
  margin-left: 15px;
}
</style>
</head>
<body>
<div class="box">
  <div class="in">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>
</body>
</html>

这样修改后，你的弹性容器就会自动拉伸到能容纳所有换行列的宽度，完美解决问题~

内容的提问来源于stack exchange，提问作者user3579659