html - 图像不会在 flexbox 中调整大小

Question

我有这个

.parentcontainer
{
background-color: black;
max-width: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: space-around;


}

.aside
{
display:flex;
flex: 30%;

flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;



}
.content
{

background-color: blue;
flex: 70%;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-between;
align-content: flex-start;
max-height:800px;


}

.content img
{
width: 100%;
max-width: 100%;
height: auto;
}

当我调整浏览器大小时，.content 的 imgs 不会调整大小，我需要进行水平滚动。我该怎么做才能调整图像大小？并且子容器不会比父容器大。谢谢。

编辑:现在我将 .content 更改为列，并将 mas 高度更改为 800px。我想让 .content 的文章下降，当它们达到 800px 时，再创建一个专栏。问题仍然存在，.content 的文章改为超出父框或调整大小...

Answer 1

试试这个:

.content img{
    width: 100%;
    max-width: 100%;
    height: auto
}