Flexbox子项溢出到其他行

Question

我正在尝试将练习网站分成使用flexbox的列的三个部分。但是，中间部分溢出Flexbox行，并且页脚部分现在隐藏在其后面。

https://jsbin.com/rerulepawu/edit?html,output

是什么原因造成的？我尝试了flex-grow和flex-shrink，但没有帮助。

任何意见，将不胜感激。谢谢。在flexboxes

Answer 1

文本通常柔性容器内重叠，解决这个问题，你可以设置

.row { 
    flex: 1; 
    display: flex; 
    overflow:auto; 
    min-height: min-content; 

} 

，并作为一个黑客我设置柔性DIV内非弹性范围，并设置它的显示阻止 BTW一切如果你的整个网站是一个大的弹性盒子，因为对齐内容决定了一个立体盒子里的位置，所以当你删除它时会变成垃圾。

这是对我显示页脚

body { 
    background-color: rgb(64, 160, 223); 
    font-family: 'Futura', sans-serif; 
    color: white; 
} 

.column { 
    display: flex; 
    height: 93%; 
    flex-direction: column; 

} 

.row { 
    flex: 1; 
    display: flex; 
    overflow:auto; 
} 

.block { 
    margin: auto; 
} 

.section_block { 
    margin: 20px; 
    height: 100px; 
} 

.section_left { 
    background-color: yellow; 
    width: 50%; 
    float: left; 
    height: 100%; 

    display: flex; 
    align-items: center; 
    justify-content: center 
} 

.section_right { 
    background-color: red; 
    width: 50%; 
    float: left; 
    height: 100%; 

    display: flex; 
    align-items: center; 
    justify-content: center 
} 

.section_title { 
    font-weight: bold; 
} 

.section_description { 
    text-align: center; 
    vertical-align: middle; 
} 

.section_photo { 
    margin: 0 
} 

.content { 
    border-radius: 15px; 
    background-color: white; 
    width: 80%; 
    color: black; 
    display: flex; 
    flex-direction: column; 
} 

/* why does everything go to shit when i delete this */ 


#contact {overflow:auto; 
    flex: 0; 
    justify-content: flex-end;}