设置Flex容器宽度匹配.first-line内容，让.second-line同宽

要实现.notes-container宽度由.first-line内容决定，同时让.second-line适配这个宽度，只需调整两个关键CSS属性：

• 给.notes-container添加align-items: flex-start，让容器宽度由子元素中最宽的（也就是.first-line）决定，避免默认的stretch行为导致容器被不必要地拉宽。
• 给.second-line替换flex-grow: 1为width: 100%，让它继承容器的宽度（即.first-line的宽度），这样内部的justify-content: space-between就能正常生效，元素均匀分布在和.first-line相同的宽度范围内。

修改后的完整代码如下：

CSS代码 #

.notes-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 关键修改：容器宽度由子元素决定 */
}

.first-line {
  display: flex;
  flex-direction: row;
}

.second-line {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%; /* 关键修改：继承容器宽度，匹配.first-line的宽度 */
}

HTML代码（无需修改） #

<div class="notes-container">
  <div class="first-line">
    <div>content 1</div>
    <div>content 2</div>
    <div>content 3</div>
    <div>content 4</div>
  </div>
  <div class="second-line">
    <div>content 5</div>
    <div>content 6</div>
    <div>content 7</div>
  </div>
</div>

补充说明 #

如果需要.notes-container在父容器中居中，可以给它的父元素添加display: flex; justify-content: center;，或者给.notes-container添加margin: 0 auto;，不会影响它的宽度由.first-line决定的特性。

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