弹性项目不会拉伸，当它们合并时，它会将我的所有其他项目移动 div

Question

我试图让一个输入框拉伸整个屏幕的宽度，但由于项目的原因，它 div' 与上面它只占用少量并且当它取消隐藏时它还会拖动上面的项目。我试过 flex-stretch、align-items: stretch 等等，但似乎没有任何效果。我什至给了它一个 div，但我无法让它工作。

如果您单击下面代码中的“回复”按钮，它将向您显示我的确切问题：

document.getElementById("reply64").addEventListener('click', (e) => {
  document.getElementById("reply64").classList.toggle("blue");
  document.getElementById("reply_form64").classList.toggle("open");
});

document.getElementById("reply71").addEventListener('click', (e) => {
  document.getElementById("reply71").classList.toggle("blue");
  document.getElementById("submit_reply71").classList.toggle("open");
});

.lk{
    display: flex;
    margin-bottom: 5px;
    font-size: 14px;
    gap: 5px;
}

.profile_image{
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.user{
    background: grey;
    padding: 10px;
    border-radius: 20px;
}

.reply-body{
    width: 100%;
    flex-shrink: 0;
}

.reply {
    display: flex;
    justify-content: legacy left;
    gap: 10px;
}

.thumb.open, .vl.open, .form-hidden.open{
    display: flex;
}

.form-hidden{
    display: none;
}

.blue{
    color: blue;
}

<head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- CSS only -->
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
      <link href="/static/css/style.css" rel="stylesheet">
      <script src="https://js.stripe.com/v3/"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
    </head>
<body>

<div class="lk">
    <img class="profile_image" src="https://robohash.org/006cb570acdab0e0bfc8e3dcb7bb4edf?size=50x50">
    <div>
      <div class="user">
        <div class="reply_author">jon 2 days ago </div>
        <div class="reply-body">hi dawg!</div>
      </div>
      <div class="reply">
        <div class="d-flex align-items-center">
          <i id="upvote64" class="fas fa-arrow-up hover" style="color: gray" onclick="vote(64,1)"></i>
          <span id="upvote_count_badge64" class="badge bg-secondary">1</span>
          <i id="downvote64" class="fas fa-arrow-down hover" style="color: gray" onclick="vote(64,0)"></i>
        </div>
        <div class="reply_comment" id="reply64" onclick="open_form(64)">Reply</div>
        <div id="facti_award_modal" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_award_modal(64)">
            <i class="fas fa-award hover"></i>
        </div>
      </div>
      <div id="vl64" class="vl"></div>
      <form id="reply_form64" class="form-hidden">
        <img class="profile_image" src="https://robohash.org/006cb570acdab0e0bfc8e3dcb7bb4edf?size=50x50">
        <input class="cmt-reply" type="text" placeholder="Write a reply2">
      </form>
      <div id="reply_loader64"><!--Nested Replies go here--></div>
    </div>
  </div>


<div class="lk">
    <img class="profile_image" src="https://robohash.org/006cb570acdab0e0bfc8e3dcb7bb4edf?size=50x50">
    <div>
      <div class="user">
        <div class="reply_author">jon 2 hours ago </div>
        <div class="reply-body">yo</div>
      </div>
      <div class="reply">
        <div class="d-flex align-items-center">
          <i id="upvote71" class="fas fa-arrow-up hover" style="color: gray" onclick="vote(71,1)"></i>
          <span id="upvote_count_badge71" class="badge bg-secondary">0</span>
          <i id="downvote71" class="fas fa-arrow-down hover" style="color: gray" onclick="vote(71,0)"></i>
        </div>
        <!--This button unides a form, but the form messes up the other divs and does not expand all the way as I want-->
        <div class="reply_comment" id="reply71">Reply</div>
        <div id="facti_award_modal" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_award_modal(71)">
            <i class="fas fa-award hover"></i>
        </div>
      </div>

      <form id="submit_reply71" class="form-hidden">
        <div class="post_comment">
          <img class="profile_image" src="https://robohash.org/006cb570acdab0e0bfc8e3dcb7bb4edf?size=50x50">
          <input class="comment_input" id="comment_input" maxlength="1024" name="body" placeholder="Write a comment3" required="" type="text" value="">
          <div id="comment_input_error" class="invalid-feedback"></div>
        </div>
      </form>
    </div>
    <div id="reply_loader71"><!--Nested Replies go here--></div>
  </div>

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js" integrity="sha512-LGXaggshOkD/at6PFNcp2V2unf9LzFq6LE+sChH7ceMTDP0g2kn6Vxwgg7wkPP7AAtX+lmPqPdxB47A0Nz0cMQ==" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>

</body>

Answer 1

隐藏回复按钮示例中的错误...我看到以下内容：

输入和表单都是未命名的 div 的子项，具有默认宽度（指定 none）。

如果您将父项的宽度设置为 100%，那么您的输入（也缺少 width: 100%）将会拉伸，如下所示：

然后您需要定义您要对灰色聊天框执行的操作，但是请记住：

如果没有特定的理由，您不能指望元素会拉伸到任何东西的全宽。检查默认宽度值（自动）：

https://developer.mozilla.org/en-US/docs/Web/CSS/width

子项通常不能超出其父项的限制，特别是默认情况下，输入的自动宽度和其 div 父项的自动宽度...永远不会导致 100% 宽度。你应该具体一点。

额外

要根据内容的大小调整 .user div 的内容，您可以尝试 max-content，这将使您的示例看起来像这样：

https://blog.logrocket.com/understanding-min-content-max-content-fit-content-css/

请阅读这篇文章，它详细解释了max-content、min-content、fit-content、优缺点等

弹性项目不会拉伸，当它们合并时，它会将我的所有其他项目移动 div

flex items will not stretch and when they unide it moves all my other items in a div

javascript

flexbox

twitter-bootstrap

bootstrap-5