下面代码中提到的flex行为不能很好地使用MS边缘中的边界框

第一个div中给出的flex应该重新调整内容大小以适应大小。这种行为在Chrome中是正确的。其中as Edge的行为方式不同。我读过一些帖子提到flexbox不能很好地与borderbox配合使用。但在这种情况下，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" >&Cross;</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没有，IMHO，这是Chrome的错误。

innerdiv高65px，上边距为2px，它的兄弟div约为20px(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">&Cross;</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>

相关内容

最新更新

热门标签：