Markup & Styling
<div id="app">
<div class="box-1">That is 1</div>
<div class="box-2">
That is 2
<div class="overflow-container">
<div class="overflow-content">That is my overflow content material</div>
</div>
</div>
</div>
* {
box-sizing: border-box;
}
physique {
font-family: sans-serif;
background: #dedede;
padding: 48px;
}
#app {
show: flex;
width: 100%;
}
.box-1 {
border: 1px stable purple;
}
.box-2 {
padding: 10px;
border: 1px stable blue;
flex: 1;
}
.overflow-container {
padding: 10px;
width: 100%;
border: 1px stable inexperienced;
overflow: auto;
}
.overflow-content {
width: 100%;
min-width: 2000px;
border: 1px stable pink;
}
When utilizing the show: flex
property, the overflow: auto
property would not perform as anticipated. As an alternative, the scale of the father or mother component expands to accommodate the width of the overflowing content material. I am searching for an answer to implement a horizontal scrollbar for the expanded content material.
It does work as anticipated with out flexbox