gpt4 book ai didi

html - 浏览器调整大小时,flexbox 父元素小于子元素

转载 作者:太空狗 更新时间:2023-10-29 13:10:06 24 4
gpt4 key购买 nike

<分区>

为什么在窄屏幕上父级比子级小?

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

enter image description here

问题很少:

  1. 为什么会这样?

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

  3. 这个问题有flexbox解决方案吗?

谢谢,

托马斯

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

.item {

height: 100px;
background-color: pink;
padding: 10px;
}
<div class="parent">
<div class="item">looooooooooooooooooooooooooooong</div>
<div class="item">looooooooooooooooooooooooooooong</div>
</div>

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com