CSS实现两个100%宽度div并排，父容器overflow:hidden仅显示第一个

嘿，我完全get到你的需求了——两个宽100%的div本来会乖乖上下叠放，但你想让它们挤在同一行里，只留第一个可见，第二个被父容器的overflow:hidden给裁掉对吧？之前用display:inline-block或float:left没成功，核心问题是默认布局里子元素会自动换行，没法让它们强行在同一行排列。下面给你两种简单靠谱的实现方法：

方法一：Flex布局（最推荐，兼容性拉满） #

Flex布局天生就是干这个的，它默认不让子元素换行，直接把两个100%宽的div怼在同一行，超出父容器的部分自然就被overflow:hidden藏起来了。

<div class="parent">
  <div class="child">第一个div（可见）</div>
  <div class="child">第二个div（被隐藏）</div>
</div>

<style>
.parent {
  overflow: hidden; /* 核心：裁切掉超出父容器的内容 */
  display: flex;    /* 让子元素水平排列，默认不换行 */
  width: 300px;     /* 给父容器设个固定宽，方便看效果 */
  height: 100px;
}

.child {
  width: 100%;      /* 每个子元素占满父容器宽度 */
  background: #f0f0f0;
  border: 1px solid #ccc;
  box-sizing: border-box; /* 避免边框撑宽子元素，可选但建议加 */
}
</style>

原理说明 #

Flex容器的flex-wrap属性默认是nowrap，也就是不管子元素总宽度多宽，都强行排在同一行。第一个div占满父容器宽度后，第二个div就只能跑到父容器外面去，刚好被overflow:hidden完美隐藏。

方法二：Inline-block + 强制不换行 #

如果你需要兼容一些非常老的浏览器（比如IE9及以下），可以用这个方案，核心是让父容器强制内部元素不换行，再把div改成inline-block。

<div class="parent">
  <div class="child">第一个div（可见）</div>
  <div class="child">第二个div（被隐藏）</div>
</div>

<style>
.parent {
  overflow: hidden;
  white-space: nowrap; /* 强制内部元素不换行 */
  font-size: 0;        /* 消除inline-block元素之间的默认空白间隙 */
  width: 300px;
  height: 100px;
}

.child {
  width: 100%;
  display: inline-block;
  font-size: 16px; /* 恢复子元素的字体大小 */
  background: #f0f0f0;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
</style>

原理说明 #

white-space: nowrap会让父容器内的inline/inline-block元素永远不换行，两个100%宽的div就只能挤在同一行。加font-size:0是为了消除inline-block元素之间的默认空白间隙——不然这个间隙会让第一个div的实际宽度稍微超过父容器，导致第二个div可能露出一丢丢，影响效果。

为什么你之前的尝试没成功？ #

不管是display:inline-block还是float:left，默认情况下当子元素总宽度超过父容器时，浏览器都会自动让它们换行，所以两个100%宽的div还是会上下叠放，自然达不到你要的隐藏效果。而上面两种方案的核心就是阻止子元素换行，让它们强行在同一行排列，这样第二个div才会超出父容器被隐藏。

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