在“僅媒體屏幕和（最大寬度：430px）”事物中時，flex 容器內的 Div 不會縮小

Question

我一直在嘗試使網站具有響應性，但彈性容器不會縮小。 我嘗試設置 flex-box 元素的width和height ，但並非所有元素都會改變。 這是 flex-container 的正常外觀。 這就是當屏幕寬度小於 430 像素時的樣子。圖像女巫是 flex-container 的一部分，將正確調整大小，但帶有文本女巫的 div 不是很奇怪，因為如果我只是改變，我可以正常調整它的大小它在@media only screen and (max-width: 430px)

HTML

   <div id="flex-stuff">
     <div class="pr_cont">
      <a href="#"><img id="project_img" src="images/img04.png" alt="stuff"></a>
      <div class="project_div">
        <p id="project_textA">Nascetur nunc varius commodo</p><br><br>
        <p id="project_textB">Interdum amet accumsan placerat commodo ut amet aliquam blandit nunc tempor lobortis nunc non. Mi accumsan.</p><br><br>
        <a href="#" id="more_box" style="background-color: #82CEC6;">View more</a>
      </div>

        <div class="pr_cont">
        ...
        </div>

        <div class="pr_cont">
        ...
        </div>

    </div>

CSS

#flex-stuff {
display: flex;
justify-content:space-around;
flex-wrap: wrap;
}
.pr_cont {
margin: 1% 1%;
width: 98%;
border-radius: 10px;
width: 400px;
}
#project_img {
border-radius: 10px 10px 0 0; 
}
.project_div {
background-color: #333;
height: 250px;
flex: 1;
width: 400px;
border-radius: 0 0 10px 10px;
} 
#project_textA {
margin-top: -4px;
border-radius: 0 0 10px 10px;
color: white;
text-align:center;
padding-top: 30px;
font-size: 24px;
font-weight: 400;
}
#project_textB {
margin: 0;
font-size: 18px;
color: gray;
text-align: center;
}
#more_box {
text-decoration: none;
text-align: center;
color: white;
width: 10%;
margin: 0 5%;
background-color: #bd00ff;
padding: 20px 36%;
border-radius: 10px;
}

問題不在於我無法更改 div 以使其更小。 我可以做到這一點，但不能在@media only screen and (max-width: 420px)中做到這一點

Answer 1

問題是我使用的是display: inline; 在彈性容器中。 解決方案是指定display: block; 在@media only screen and (max-width: 430px)東西上。