如何让 CSS 兄弟元素跟随最长元素等宽，并控制滚动条位置？

哈喽！今天心血来潮给大家带来了《如何让 CSS 兄弟元素跟随最长元素等宽，并控制滚动条位置？》，想必大家应该对文章都不陌生吧，那么阅读本文就都不会很困难，以下内容主要涉及到，若是你正在学习文章，千万别错过这篇文章~希望能帮助到你！

css兄弟元素跟随宽度最长的元素等宽

想要让红色和灰色元素的宽度跟随绿色元素的宽度撑满一致，我们需要用到width: fit-content属性。该属性可以使元素的宽度由其内部内容决定。

但是，如果直接给 .container 元素设置 width: fit-content，滚动条将出现在 body 元素上。我们可以通过在 .container 外部再套一层 div 来解决这个问题。

以下是如何实现这一效果的：

html结构：

<div class="wrap">
  <div class="container">
    <div class="item1">item1</div>
    <div class="item2">item2</div>
    <div class="item3">item3</div>
  </div>
</div>

css样式：

.wrap { 
  width: 100%;
  overflow-x: auto;
}
.container {
  width: fit-content;
}
.item1 {
  background: red;
}
.item2 {
  background: gray;
}
.item3 {
  min-width: 1300px;
  background: greenyellow;
}

这样，红色和灰色元素的宽度就会随着绿色元素的宽度而自动调整，并且滚动条会出现在 .wrap 元素上，而不是 body 元素上。

理论要掌握，实操不能落！以上关于《如何让 CSS 兄弟元素跟随最长元素等宽，并控制滚动条位置？》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！