第一个 div 中给出的 flex 应该重新调整内容的大小以适应大小。这种行为在 Chrome 中是正确的。因为 Edge 的行为方式不同。我读过一些帖子提到 flexbox 不能很好地与边框框配合使用。但在那种情况下，Chrome 也应该以与 Edge 相同的方式运行。
#notificationNameAnnex
{
height: 35px;
display: flex;
flex-direction: row;
width: calc(100% - 116px);
}
#markAsNotificationButtons
{
font-size: 11px;
background-color: #30b4f4;
border: 1px solid #1a99d6;
height: 20px;
padding: 2px;
line-height: 16px;
padding-left: 5px;
padding-right: 5px;
padding-top: 2px;
margin-left: 5px;
cursor: pointer;
border-radius: 5px;
color:white;
}
*
{
box-sizing: border-box;
}
.outerdiv
{
width: 440px;
height: 80px;
overflow: hidden;
border: 1px solid red;
background-color: #f9f3ff;
top: 0px;
font-family: roboto;
letter-spacing: 0.75px;
display: flex;
flex-direction: column;
}
.innerdiv
{
width: 400px;
height: 65px;
position: relative;
padding: 6px;
padding-top: 3px;
display: flex;
flex-direction: column;
justify-content: space-between;
background-color: #e5dbfd;
font-size: 10px;
color: #490181;
border: 1px solid #d3c7ef;
border-radius: 3px;
margin: auto;
text-align: center;
margin-top: 2px;
}<!DOCTYPE html>
<html>
<head>
<style>
#notificationNameAnnex
{
height: 35px;
display: flex;
flex-direction: row;
width: calc(100% - 116px);
}
#markAsNotificationButtons
{
font-size: 11px;
background-color: #30b4f4;
border: 1px solid #1a99d6;
height: 20px;
padding: 2px;
line-height: 16px;
padding-left: 5px;
padding-right: 5px;
padding-top: 2px;
margin-left: 5px;
cursor: pointer;
border-radius: 5px;
color:white;
}
*
{
box-sizing: border-box;
}
.outerdiv
{
width: 440px;
height: 80px;
overflow: hidden;
border: 1px solid red;
background-color: #f9f3ff;
top: 0px;
font-family: roboto;
letter-spacing: 0.75px;
display: flex;
flex-direction: column;
}
.innerdiv
{
width: 400px;
height: 65px;
position: relative;
padding: 6px;
padding-top: 3px;
display: flex;
flex-direction: column;
justify-content: space-between;
background-color: #e5dbfd;
font-size: 10px;
color: #490181;
border: 1px solid #d3c7ef;
border-radius: 3px;
margin: auto;
text-align: center;
margin-top: 2px;
}
</style>
</head>
<body>
<div class="outerdiv">
<div class="innerdiv" >
<div style="position: absolute;z-index: 1;right: 5px;color: #9683bd;cursor: pointer;top:-5px;font-size:12px;" title="Close" >⨯</div>
<div style="line-height: 12px;font-size: 10px;color:#490181;margin: auto;width: 360px;">
This div is bigger (width is also 300px and height is 100px)This div is bigger (width is also 300px and height is 100px)
</div>
<div style="display: flex;margin-top: 5px; ">
<div style="width: 116px;font-size: 10px;font-weight:medium;height: 20px;">Give a name for feed</div>
<div id="notificationNameAnnex">
<div style="display: flex;flex-direction: column;width: 210px;">
<input type="text" placeholder="Give feed name" style="margin-bottom: 0;font-size: 11px;"/>
</div>
<div id="markAsNotificationButtons">
<div>Confirm</div>
</div>
</div>
</div>
</div>
<div style="font-size: 10px; color: #818181; margin: auto; line-height: 20px; display: block;">
Note: This div is bigger (width is also 300px and height is 100px).
</div>
</div>
</div>
</body>
</html>默认情况下，Flex 项目不会小于其内容，因为其min-height默认为auto。
Chrome 仍然会缩小您的样本，Firefox/Edge 不会，恕我直言，Chrome 在这里是错误的。
该innerdiv是65px高+ 2px的上边距，和它的同胞底部div，大约是20像素（line-height），这使得他们对高87px，并不会当然适合在其父是80px。
通过添加min-height: 0来innerdiv解决跨浏览器的问题，让它缩小。
堆栈片段
#notificationNameAnnex {
height: 35px;
display: flex;
flex-direction: row;
width: calc(100% - 116px);
}
#markAsNotificationButtons {
font-size: 11px;
background-color: #30b4f4;
border: 1px solid #1a99d6;
height: 20px;
padding: 2px;
line-height: 16px;
padding-left: 5px;
padding-right: 5px;
padding-top: 2px;
margin-left: 5px;
cursor: pointer;
border-radius: 5px;
color: white;
}
* {
box-sizing: border-box;
}
.outerdiv {
width: 440px;
height: 80px;
overflow: hidden;
border: 1px solid red;
background-color: #f9f3ff;
top: 0px;
font-family: roboto;
letter-spacing: 0.75px;
display: flex;
flex-direction: column;
}
.innerdiv {
width: 400px;
height: 65px;
position: relative;
padding: 6px;
padding-top: 3px;
display: flex;
flex-direction: column;
justify-content: space-between;
background-color: #e5dbfd;
font-size: 10px;
color: #490181;
border: 1px solid #d3c7ef;
border-radius: 3px;
margin: auto;
text-align: center;
margin-top: 2px;
min-height: 0; /* added */
}<div class="outerdiv">
<div class="innerdiv">
<div style="position: absolute;z-index: 1;right: 5px;color: #9683bd;cursor: pointer;top:-5px;font-size:12px;" title="Close">⨯</div>
<div style="line-height: 12px;font-size: 10px;color:#490181;margin: auto;width: 360px;">
This div is bigger (width is also 300px and height is 100px)This div is bigger (width is also 300px and height is 100px)
</div>
<div style="display: flex;margin-top: 5px; ">
<div style="width: 116px;font-size: 10px;font-weight:medium;height: 20px;">Give a name for feed</div>
<div id="notificationNameAnnex">
<div style="display: flex;flex-direction: column;width: 210px;">
<input type="text" placeholder="Give feed name" style="margin-bottom: 0;font-size: 11px;" />
</div>
<div id="markAsNotificationButtons">
<div>Confirm</div>
</div>
</div>
</div>
</div>
<div style="font-size: 10px; color: #818181; margin: auto; line-height: 20px; display: block;">
Note: This div is bigger (width is also 300px and height is 100px).
</div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句