深入理解CSS之 如何使子元素撑宽 设置了 block 的父元素

先写一个模板，晚点再吐槽

HTML

<div class="wrap">
  <div class="grandpa">
    <div class="father">
      <span class="child">我是一个子元素，我要写很多字把宽度撑开，我要写很多字把宽度撑开，我要写很多字把宽度撑开，我要写很多字把宽度撑开</span>
    </div>
  </div>
</div>

CSS

.wrap {
  width: 300px;
  box-shadow: 0 0 3px 1px #000000;
  padding: 5px;
}
.grandpa {
  box-shadow: 0 0 3px 1px peru;
  padding: 5px;
}
.father {
  box-shadow: 0 0 3px 1px royalblue;
  padding: 5px;
}
.child {
  white-space: nowrap;
}

效果图

吐槽

可能看到这个标题的并且懂一点 css 的小伙伴就要笑了，子元素称宽父元素不是很简单吗。

只需要设置父元素 display 为 inline-block, 或者 设置 float: left 并清除一下浮动影响就行，就像下面这样。

.father {
  display: inline-block;
}

.father {
  float: left; /* 未清除浮动 */
}

或者对 css 理解更深入的小伙伴也会想

也可以设置 爷爷（父元素的父元素） 元素 display 为 flex 或者 grid，就像下面这样。

.grandpa{
  display: flex;
}

.grandpa{
  display: grid;
}

实现原理 与 更多支持的属性

上面的属性不管是.father 设置 display: inline-block 或 float: left; ，

还是 .grandpa 设置 display: flex; 或 display: grid;

都是使 .father 这个DOM 最大宽度不受 .grandpa 限制，

唯一的区别是每个属性还带有其他个性的样式，

比如 设置了 float 默认就无法撑开高度

设置了 display: grid 即使文本过少，.father 的宽度默认与.grandpa 相同

只要满足 .father 自动宽度 不受 .grandpa 最大宽度限制就能实现这个效果的话，display 的很多属性都能实现。

比如： inline-flex, inline-table, inline-grid, table, table-captioin, table-cell …，看下面的例子。

不想使父级的 块 属性消失怎么办

有时候我们看文档的时候，只从描述中无法深入的了解属性。比如这里的子元素撑开父元素，我们第一反应就是更改父元素的块属性。

隐藏属性就是，父元素是块，但是未设置过 width 和 max-width , 子元素能撑开的最大宽度就是最近一个设置过宽度的祖先元素，而不是只是父元素。还用上面的模板举个例子

.grandpa{
  display: inline-block;
}

这个例子中就可以看到，爷爷元素设置了 display: inline-block ，父亲元素 还是 块 元素。但是子元素会连带父元素和爷爷元素一起撑宽。

如果是在 .wrap 这个DOM 上设置 display: inline-block ，父元素和爷爷元素还是不过超过 .wrap 的宽度。

这就是上面说到的 子元素能撑开的最大宽度就是最近一个设置过宽度（最大宽度）的祖先元素。

这种属性规则有什么作用呢

如果是写一个树，子元素都需要块占据一行，但是子要撑开父元素，只需要中间的块元素不设置宽度。

最上层元素设置上面提到的任意不受父最大宽度限制的属性，都可以撑宽树整体宽度。从而出现横向滚动条。

有兴趣的小伙伴可以看看 v-jstree demo 就是设置顶层元素 display: inline-block，使横向滚动条出现的，使用这个插件顶层元素 默认并不是display: inline-block ，不要忘了手动设置。

css 隐藏规则有很多，大家伙多用用就知道了，比如前几天 张鑫旭 发的一篇博客 使用 columns 属性，不单能直接分割文本，还能分割标签（虽然有较多限制）。

以上分享如果疏漏或错误欢迎指正。