javascript - 使用 Flexbox 使用 overflow-x 使子 div 宽度为容器的 100%
问题描述
我正在尝试使具有溢出-x 内容的 Flexbox 容器的子 div 具有溢出的 100% 的宽度,但我无法弄清楚,已经进行了多次搜索并且找不到解决方案;
有人能帮我吗?
小提琴:https ://codepen.io/joaovtrc/pen/MWaaxKr
HTML:
<div class="test-container">
<div class="test-item-overflow">
overflowing contenttttttt
</div>
<div class="test-item-2"></div>
</div>
CSS:
.test-container {
width: 1000px;
height: 500px;
margin: auto;
background: black;
display: flex;
flex-direction: column;
overflow-x: auto;
}
.test-item-overflow {
width: fit-content;
height: 55px;
background: red;
border: 1px solid yellow;
}
.test-item-2 {
width: 100%;
height: 55px;
background: blue;
border: 1px solid green;
}
我希望“test-item-2”(具有蓝色背景的那个)div 的宽度与红色的相匹配,但是请记住,redbox 上的内容可能每次都不完全相同,所以没有 calc( 100% + x) 具有固定参数...
解决方案
正如您width: fit-content;
为溢出 div 设置的那样,它使宽度随着该 div 中更多内容的增长而变得无法控制。一种解决方案可能是更改width: 100%;
并添加overflow-x: scroll
到类.test-item-overflow。(请参阅以下代码段中的更改)
但是,如果您想保留width: fit-content;
红色 div 并将蓝色 div 的宽度与红色 div 一起更改(取决于内容),您可以添加:document.getElementsByClassName("test-item-2").style.width = document.getElementsByClassName("test-item-overflow").offsetWidth + "px"
。(在这种情况下,最好为 div 定义 id 并在 js 代码中使用 getElementById)
.test-container {
width: 1000px;
height: 500px;
margin: auto;
background: black;
display: flex;
flex-direction: column;
overflow-x: auto;
}
.test-item-overflow {
width: 100%;
overflow-x: scroll;
height: 55px;
background: red;
border: 1px solid yellow;
}
.test-item-2 {
width: 100%;
height: 55px;
background: blue;
border: 1px solid green;
}
<div class="test-container">
<div class="test-item-overflow">
aaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div class="test-item-2"></div>
</div>
推荐阅读
- python - 迭代文本文件的函数
- python - 如何排除层权重并仅保留我想要的权重并使用 keras 预测模型?
- javascript - 在不改变 r 值的情况下改变气泡半径的大小
- javascript - 组件无法从 React Native 中的 index.d.ts 文件自动导入类型
- flutter - 解决了 Flutter - Infinite Scroll & Images 导致 App Crash
- laravel - 在 laravel 7 中使用 gmail 发送邮件
- r - 闪亮:updateSelectInput() 选择的参数问题与observe()
- python - Python 发送带有相应附件的电子邮件
- css-selectors - 富结果测试在架构中为面包屑返回“null”和“未命名”,但它在 Google 结构化数据测试工具中正确显示
- android - 使用 InApp 更新 API 模式 灵活