能否仅通过CSS实现同一flex容器内部分元素指定换行？

不用动态修改flex-wrap规则，仅通过调整元素的Flex属性就能实现需求。核心思路是强制前两个元素始终保持在同一行，同时让第三个元素自动换行并占据整行宽度：

• 给前两个元素设置white-space: nowrap，防止文本/图标因容器变窄换行；
• 给第二个元素设置flex-shrink: 0，确保图标不会被压缩变形；
• 给第三个元素设置flex-basis: 100%，强制它换行到第二行，再通过width: 100%让输入框占满整行宽度。

修改后的CSS代码如下：

th {
  position: relative;
}

.resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  width: 1ch;
  height: 100%;
  visibility: hidden; /* 默认隐藏，hover时显示 */
}

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

.first-child {
  margin-right: 1ch;
  white-space: nowrap; /* 禁止文本换行 */
}

.second-child {
  flex-shrink: 0; /* 禁止图标被压缩 */
  white-space: nowrap; /* 确保图标不换行 */
}

.third-child {
  flex-basis: 100%; /* 强制换行到第二行 */
  width: 100%; /* 输入框占满整行 */
  min-width: 0; /* 避免输入框溢出容器 */
}

完整可运行代码：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
<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>

<script>
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';
});
</script>

调整后，无论怎么拖动调整列宽，标题文本和排序图标都会始终保持在第一行，搜索输入框固定在第二行并占满整列宽度，完全符合需求。

内容的提问来源于stack exchange，提问作者burkay