如何将 Flex 容器的宽度固定为等于 flex 项的宽度？ [复制]答案

【问题标题】：How do I fix the width of Flex container to be equal to the width of flex items? [duplicate]如何将 Flex 容器的宽度固定为等于 flex 项的宽度？ [复制]
【发布时间】：2022-01-17 19:07:09
【问题描述】：

.container {
  display: flex;
  border: 5px solid blue;
  height: 200px;
  flex-wrap:wrap;
  width: fit-content;
  
  .div-1 {
    border: 5px solid red;
    width: 230px;
  }
  .div-2 {
    border: 5px solid green;
    width: 200px;
  }

  .div-3 {
    border: 5px solid green;
    width: 200px;
  }
  .div-4 {
    border: 5px solid green;
    width: 200px;
  }
  .div-5 {
    border: 5px solid green;
    width: 200px;
  }
   .div-6 {
    border: 5px solid green;
    width: 200px;
  }
   .div-7 {
    border: 5px solid green;
    width: 400px;
  }
   .div-8 {
    border: 5px solid green;
    width: 400px;
  }
}

<div class="container">
  <div class="div-1">I'm 230 px wide</div>
  <div class="div-2">I'm take up what is left in the view port!</div>
  
  <div class="div-3"></div>
  <div class="div-4"></div>
  <div class="div-5"></div>
  <div class="div-6"></div>
  <div class="div-7"></div>
  <div class="div-8"></div>
</div>

我想把 flex-container 的宽度设置为等于 flex-items 的宽度，这样最后就没有剩余空间了..

附上代码供参考。在这里，我想将容器的宽度固定为等于前 6 个 div 组合的宽度。

.container {
  display: inline-flex;
  border: 5px solid blue;
  height: 200px;
  width: fit-content;
  flex-wrap: wrap;
  
  .div-1 {
    border: 5px solid red;
    width: 230px;
  }
  .div-2 {
    border: 5px solid green;
    width: 200px;
  }

  .div-3 {
    border: 5px solid green;
    width: 200px;
  }
  .div-4 {
    border: 5px solid green;
    width: 200px;
  }
  .div-5 {
    border: 5px solid green;
    width: 200px;
  }
  .div-6 {
    border: 5px solid green;
    width: 200px;
  }
  .div-7 {
    border: 5px solid green;
    width: 400px;
  }
  .div-8 {
    border: 5px solid green;
    width: 300px;
  }
  
}

.next-line {
  height: 100px;
  border: 5px solid orange;
}

<div class="container">
  <div class="div-1">I'm 230 px wide</div>
  <div class="div-2">I'm take up what is left in the view port!</div>
  <div class="div-3"></div>
  <div class="div-4"></div>
  <div class="div-5"></div>
    <div class="div-6"></div>
    <div class="div-7"></div>
    <div class="div-8"></div>
</div>
<div class="next-line">
  I'm the next div element!
</div>

https://codepen.io/prashantkumarsahu/pen/WNZRXdB

【问题讨论】：

请在问题中添加代码。不要为代码参考添加图像/代码链接stackoverflow.com/help/how-to-ask
@Prashant 请注意，代码 sn-ps 中不支持 SCSS
看看这个答案stackoverflow.com/questions/29503227/…

标签： css flexbox

【解决方案1】：

修改.container css

.container {
  display: flex;
  /* width: fit-content; */
  ...

这样 div-1 会拉伸容器的宽度。

【讨论】：

【解决方案2】：

当你在容器的样式中使用display: flex;，并且容器没有拥有宽度时，容器的宽度将固定在孩子的宽度上。

如果您的容器具有固定宽度，并且您希望孩子们长大并占据整个容器宽度，您应该在孩子的样式中使用flex-grow:1; 属性。

如果你想了解更多关于flex-grow的信息，我建议你developer.mozilla.org和css-tricks.com

Here 是 Codepen 链接。

.container {
  display: flex;
  border: 5px solid blue;
  height: 200px;
  flex-wrap:wrap;
 }
  .div-1 {
    border: 5px solid red;
    width: 230px;
    flex-grow:1;
  }
  .div-2 {
    border: 5px solid green;
    width: 200px;
    flex-grow:1;
  }

  .div-3 {
    border: 5px solid green;
    width: 200px;
    flex-grow:1;
  }
  .div-4 {
    border: 5px solid green;
    width: 200px;
    flex-grow:1;
  }
  .div-5 {
    border: 5px solid green;
    width: 200px;
    flex-grow:1;
  }
   .div-6 {
    border: 5px solid green;
    width: 200px;
     flex-grow:1;
  }
   .div-7 {
    border: 5px solid green;
    width: 400px;
  }
   .div-8 {
    border: 5px solid green;
    width: 400px;
  }

.next-line {
  height: 100px;
  border: 5px solid orange;
}

<div class="container">
  <div class="div-1">I'm 230 px wide</div>
  <div class="div-2">I'm take up what is left in the view port!</div>
  <div class="div-3"></div>
  <div class="div-4"></div>
  <div class="div-5"></div>
    <div class="div-6"></div>
    <div class="div-7"></div>
    <div class="div-8"></div>
</div>

【讨论】：