小编Tho*_*mas的帖子

flexbox父级小于浏览器大小的子元素

为什么父母在狭窄的屏幕上小于孩子?

请参阅代码段...然后将浏览器的大小(宽度方向)调整为小于粉红色框.应该出现滚动条.向后滚动到页面右侧,注意绿色背景小于粉红色区域,右侧有一个白点.

在此输入图像描述

这么几个问题:

  1. 为什么会这样?

  2. 当调整浏览器大小而不在父级(或其他任何地方)设置显式宽度或使用时,如何防止父div的绿色背景小于粉红色框/ div overflow:hidden

  3. 是否有针对此问题的flexbox解决方案?

谢谢,

托马斯

.parent {
  height: 400px;
  background-color: green;
  display: flex;
}

.item {

  height: 100px;
  background-color: pink;
  padding: 10px;
}
Run Code Online (Sandbox Code Playgroud)
<div class="parent">
  <div class="item">looooooooooooooooooooooooooooong</div>
  <div class="item">looooooooooooooooooooooooooooong</div>
</div>
Run Code Online (Sandbox Code Playgroud)

html css html5 css3 flexbox

12
推荐指数
2
解决办法
9806
查看次数

标签 统计

css ×1

css3 ×1

flexbox ×1

html ×1

html5 ×1