我有一個包含三個元素的flex容器。我希望前兩個元素總是留在第一行，最后一個元素填充整個第二行。我需要在第二個元素后的flex-wrap規則的動態變化。可能嗎？

請不要建議我改變結構。我知道對于前兩個元素使用內部容器是可行的，但是我不能修改結構；我只能添加CSS規則。

示例已更新。嘗試縮小第一列，直到排序圖標到達第二行。我希望列標題和圖標留在第一行，搜索輸入在第二行。有點像https://swimlane.github.io/ngx-datatable/

var activeResizeHandler;
var clickEventX;
var originalWidth;
$(".resize-handle").mousedown(function(e) {
  activeResizeHandler = e.target;
  clickEventX = e.originalEvent.x;
  originalWidth = e.target.parentNode.clientWidth;
  $(e.target).addClass("active");
});
$(document).mouseup(function(e) {
  activeResizeHandler = null;
  $(".resize-handle.active").removeClass("active");
});
$(document).mousemove(function(e) {
  if (!activeResizeHandler) return;
  var newWidth = originalWidth + e.originalEvent.x - clickEventX;
  console.log(newWidth);
  activeResizeHandler.parentNode.style.width = newWidth + 'px';
});

th {
  position: relative;
}

.resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  width: 1ch;
  height: 100%;
}

th:hover .resize-handle,
.resize-handle.active {
  visibility: visible;
  border-right: 1px solid red;
  cursor: col-resize;
}

.first-child {
  margin-right: 1ch;
}

.second-child {}

.third-child {
  flex-basis: 100%;
  min-width: 0;
}

<link  rel="stylesheet" />
<link rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table class="table table-bordered table-striped">
  <thead>
    <tr>
      <th scope="col">
        <div class="d-flex flex-wrap">
          <span class="first-child">Some unnecessarily long text to test</span>
          <i class="second-child bi bi-sort-down-alt"></i>
          <input type="text" class="third-child" />
        </div>
        <span class="resize-handle"></span></th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

#container {
  display: flex;
  border: 2px solid salmon;
  width: 200px;
  flex-wrap: wrap;
  /* Adding this wraps the second element, too */
}

#container>div {
  flex-basis: 50%;
  /*50% because you want the first two to take all space*/
}

#child1,
#child2,
#child3 {
  height: 50px;
}

#child1 {
  background: navy;
}

#child2 {
  background: green;
}


/*Specified container so we dont have to use important*/

#container #child3 {
  background: yellow;
  height: 50px;
  flex-basis: 100%;
  /*100% because you want this element to take all space*/
}

<div id="container">
  <div id="child1"></div>
  <div id="child2"></div>
  <div id="child3"></div>
</div>

用顯示解決了:網格；。下面是工作代碼。

var activeResizeHandler;
var clickEventX;
var originalWidth;
$(".resize-handle").mousedown(function(e) {
  activeResizeHandler = e.target;
  clickEventX = e.originalEvent.x;
  originalWidth = e.target.parentNode.clientWidth;
  $(e.target).addClass("active");
});
$(document).mouseup(function(e) {
  activeResizeHandler = null;
  $(".resize-handle.active").removeClass("active");
});
$(document).mousemove(function(e) {
  if (!activeResizeHandler) return;
  var newWidth = originalWidth + e.originalEvent.x - clickEventX;
  console.log(newWidth);
  activeResizeHandler.parentNode.style.width = newWidth + 'px';
});

th {
  position: relative;
}

.resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  width: 1ch;
  height: 100%;
}

th:hover .resize-handle,
.resize-handle.active {
  visibility: visible;
  border-right: 1px solid red;
  cursor: col-resize;
}

.group-container {
  display: grid;
  grid-template-columns: auto min-content;
}

.first-child {
  grid-row: 1;
  grid-column: 1;
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.second-child {
  grid-row: 1;
  grid-column: 2;
}

.third-child {
  grid-row: 2;
  grid-column: 1 / span 2;
}

<link  rel="stylesheet" />
<link rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table class="table table-bordered table-striped">
  <thead>
    <tr>
      <th scope="col">
        <div class="group-container">
          <span class="first-child">Some unnecessarily long text to test</span>
          <i class="second-child bi bi-sort-down-alt"></i>
          <input type="text" class="third-child" />
        </div>
        <span class="resize-handle"></span></th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>