使用flex-wrap的div的父div在换行时不会减少其宽度

Question

我有一个 div .Content 和两个 div .SubHeader 包含我的标题和一个按钮 .Boards 有 2 个子 div ： .第一部分（前两列） .第二部分（最后两列）

我希望在减小窗口宽度时，最后两列会下降。它工作正常。

但是我对父 div .Content 有问题。由于某种原因，它的宽度保持非常宽，就像它忽略了 chidl div 被包裹的事实一样。

无换行的结果：

包裹后的结果：

包裹时想要的结果：

HTML 代码：

<div class="Content">
   <div class="SubHeader">
      <h1>Mes tickets</h1>
      <button>Créer un ticket</button>
   </div>
   <div class="Boards">
      <div class="Firstpart">
         <div class="Board Todo">
            <h2>A faire</h2>
            <div class="Tickets">
               <div id="48" class="Ticket State0" draggable="true">
                  <div class="Content">
                     <p>{"id":48,"title":"test","description":"test","state":0,"userProfile":19}</p>
                     <div class="Actions"><label class="Remove">Supprimer</label><label class="Move">Déplacer</label></div>
                  </div>
                  <div class="Arrows">
                     <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" class="MyArrow" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                        <path d="M34.9 289.5l-22.2-22.2c-9.4-9.4-9.4-24.6 0-33.9L207 39c9.4-9.4 24.6-9.4 33.9 0l194.3 194.3c9.4 9.4 9.4 24.6 0 33.9L413 289.4c-9.5 9.5-25 9.3-34.3-.4L264 168.6V456c0 13.3-10.7 24-24 24h-32c-13.3 0-24-10.7-24-24V168.6L69.2 289.1c-9.3 9.8-24.8 10-34.3.4z"></path>
                     </svg>
                     <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" class="MyArrow" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                        <path d="M413.1 222.5l22.2 22.2c9.4 9.4 9.4 24.6 0 33.9L241 473c-9.4 9.4-24.6 9.4-33.9 0L12.7 278.6c-9.4-9.4-9.4-24.6 0-33.9l22.2-22.2c9.5-9.5 25-9.3 34.3.4L184 343.4V56c0-13.3 10.7-24 24-24h32c13.3 0 24 10.7 24 24v287.4l114.8-120.5c9.3-9.8 24.8-10 34.3-.4z"></path>
                     </svg>
                  </div>
               </div>
            </div>
         </div>
         <div class="Board Doing">
            <h2>En cours</h2>
            <div class="Tickets"></div>
         </div>
      </div>
      <div class="Secondpart">
         <div class="Board Waiting">
            <h2>En attente</h2>
            <div class="Tickets"></div>
         </div>
         <div class="Board Done">
            <h2>Terminés</h2>
            <div class="Tickets"></div>
         </div>
      </div>
   </div>
</div>

CSS 代码：

    .Content {
        margin-right: 1em;
        margin-left: 1em;

        display: flex;
        flex-direction: column;
        align-items: center;



        .SubHeader {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            width: 100%;

            margin-top: 2em;
            margin-bottom: 0.5rem;
            padding-left: 0.5rem;
            padding-right: 0.5rem;


            h1 {
                color: $blue4;
                text-align: center;
                font-size: 2em;
                margin: 0;q
            }

            button {
                font-size: 1em;
            }

        }



        .Boards {

            display: flex;
            flex-direction: row;
            justify-content: center;
            flex-wrap: wrap;

            .Firstpart,
            .Secondpart {
                display: flex;
                flex-direction: row;
                justify-content: center;

            }


        }

    }

我尝试删除 .SecondPart 或 .firstPart 以查看它是否在没有 flex-wrap 的情况下执行相同的操作，但没有。当我有两列并且不使用 flex-wrap 时，它工作得很好。

Answer 1

用另一个

div

包裹起来，宽度为 100%

<div style="width: 100%;">
  <div class="SubHeader">
    <h1>Mes tickets</h1>
      <button>Créer un ticket</button>
  </div>
</div>