为什么父母在狭窄的屏幕上小于孩子?
请参阅代码段...然后将浏览器的大小(宽度方向)调整为小于粉红色框.应该出现滚动条.向后滚动到页面右侧,注意绿色背景小于粉红色区域,右侧有一个白点.
这么几个问题:
为什么会这样?
当调整浏览器大小而不在父级(或其他任何地方)设置显式宽度或使用时,如何防止父div的绿色背景小于粉红色框/ div overflow:hidden?
是否有针对此问题的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)