我有一个带有"display: flex;"的DIV,其中包含2个相邻的子DIV。第一个仅是包含一些有序列表项的DIV,而第二个DIV包含一些图像。对第二个DIV应用了"display: flex"和"flex-wrap: wrap"。
由于某种原因,当我为第一个DIV设置200px的宽度时,它不起作用...它没有得到200px的宽度。但如果我改成使用"min-width"为200px,那么它就能得到200px的宽度。我需要知道为什么"width"不起作用,而"min-width"起作用...请看下图:
由于某种原因,当我为第一个DIV设置200px的宽度时,它不起作用...它没有得到200px的宽度。但如果我改成使用"min-width"为200px,那么它就能得到200px的宽度。我需要知道为什么"width"不起作用,而"min-width"起作用...请看下图:
![PLEASE VIEW THIS IMAGE BEFORE ANSWERING MY QUESTION!](https://istack.dev59.com/c2vrF.webp)
/* Parent container that contains 2 child DIVs */
.parent_flex_container {
display: flex;
}
/* First child DIV */
#desktop_sidemenu {
width: 200px;
}
/* Second child DIV */
.flex_container {
display: flex;
flex-wrap: wrap;
}
/* Images of the second child DIV */
.Cac {
max-width: 50%;
height: 50%;
margin-bottom: 20px;
padding: 0 5px;
}
<div class="parent_flex_container">
<div id="desktop_sidemenu">
<nav>
<ul>
<li><a href="#">Arabic</a></li>
<li><a href="#">Green tea</a></li>
</ul>
</nav>
</div>
<div>
<div id="Featured_grid">
<div class="grid_title_holder">
<h2>Featured</h2>
</div>
<div class="flex_container">
<div class="Cac">
<img src="images/cover1.jpg" alt="" title="" />
<p class="Artist_name_holder">Artist Name</p>
<p class="Song_title_holder">Song Title</p>
</div>
<div class="Cac">
<img src="images/cover2.jpg" alt="" title="" />
<p class="Artist_name_holder">Artist Name</p>
<p class="Song_title_holder">Song Title</p>
</div>
<div class="Cac">
<img src="images/cover1.jpg" alt="" title="" />
<p class="Artist_name_holder">Artist Name</p>
<p class="Song_title_holder">Song Title</p>
</div>
<div class="Cac">
<img src="images/cover2.jpg" alt="" title="" />
<p class="Artist_name_holder">Artist Name</p>
<p class="Song_title_holder">Song Title</p>
</div>
<div class="Cac">
<img src="images/cover1.jpg" alt="" title="" />
<p class="Artist_name_holder">Artist Name</p>
<p class="Song_title_holder">Song Title</p>
</div>
<div class="Cac">
<img src="images/cover2.jpg" alt="" title="" />
<p class="Artist_name_holder">Artist Name</p>
<p class="Song_title_holder">Song Title</p>
</div>
<div class="Cac">
<img src="images/cover1.jpg" alt="" title="" />
<p class="Artist_name_holder">Artist Name</p>
<p class="Song_title_holder">Song Title</p>
</div>
<div class="Cac">
<img src="images/cover2.jpg" alt="" title="" />
<p class="Artist_name_holder">Artist Name</p>
<p class="Song_title_holder">Song Title</p>
</div>
</div>
</div>
</div>
</div>