弹性项目的宽度正在缩小

Question

我有一个带“ display：flex;”的DIV。包含两个相邻的子DIV。第一个只是一个DIV，其中包含一些有序列表项，第二个DIV包含一些图像。第二个DIV已应用display: flex和flex-wrap: wrap。

由于某种原因，当我给第一个DIV宽度为200px时，它不起作用...它的宽度为200px。但是，如果我改为给它200px的min-width，那么它将起作用并获得200px的宽度。我需要了解为什么width有效时min-width不起作用...

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9jMnZyRi5wbmcifQ==” alt =“请在回答我的问题之前先查看此图像！

/* 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>

请回答我的问题之前，请先查看此图像！我有一个带“ display：flex;”的DIV。包含两个相邻的子DIV。第一个只是一个DIV，其中包含一些有序列表...

Answer 1

我需要了解为什么width工作时min-width不能工作...