在下面的代码中,我有一个带有嵌套 flex 列容器的 flex 行容器。在 Flex 列容器中,自动换行似乎不起作用。
.profile-header {
padding-bottom: 20px;
}
.profile-header-container {
display: flex;
justify-content: center;
border: 1px solid purple;
}
.picture {
height: 175px;
width: 175px;
background-color: orange;
flex-shrink: 0;
}
.info {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.name {
font-size: 24px;
border: 1px solid red;
}
.button {
height: 50px;
width: 150px;
background-color: blue;
}
<div class="profile-header">
<div class="profile-header-container">
<div class="picture">
</div>
<div class="info">
<div class="name">
reallylongfirstname reallylonglastname
</div>
<div class="button">
</div>
</div>
</div>
</div>
.name
元素似乎不想在 Internet Explorer 中自动换行,但它在 Chrome 中似乎工作得很好。我检查了 Flex 错误,特别是错误 #2,但设置 max-width: 100%
似乎不起作用。有什么办法可以让我完成这项工作吗?
最佳答案
您可以使用CSS表格来实现相同的布局。
.profile-header {
border: 1px solid green;
}
.profile-header-container {
display: table;
margin: 0 auto;
border: 1px solid purple;
}
.picture,
.info {
display: table-cell;
vertical-align: middle;
}
.picture {
display: block;
height: 175px;
width: 175px;
background-color: orange;
}
.info {
text-align: center;
}
.name {
font-size: 24px;
border: 1px solid red;
}
.button {
display: block;
height: 50px;
width: 150px;
margin: 0 auto;
background-color: blue;
}
<div class="profile-header">
<div class="profile-header-container">
<div class="picture"></div>
<div class="info">
<div class="name">
reallyrealylongfirstname reallyreallylonglastname
</div>
<div class="button"></div>
</div>
</div>
</div>
<强> jsFiddle
关于html - 自动换行不适用于 Internet Explorer 中的 Flex 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41781897/