I want my top-level-div-content to be expandable over the size of the top-level-div-container and the top-level-divs to show a horizontal scrollbar when needed.
If the top-level-divs are small enough they should still be next to each other.
.top-level-div-container {
display: flex;
flex-wrap: wrap;
align-items: stretch;
justify-content: center;
width: 90vw;
height: 90vh;
border: solid 2px pink;
}
.top-level-div {
display: flex;
width: min-content;
overflow: auto;
max-height: 95vh;
border: solid 2px blue;
}
.top-level-div-content {
display: inline-block;
max-width: 100%;
resize: horizontal;
overflow: hidden;
resize: horizontal;
min-width: 10vw;
width:20vw;
height:100%;
border: 2px solid green;
}
<div >
<div >
<div > </div>
<div > </div>
<div > </div>
</div>
<div >
<div > </div>
<div > </div>
<div > </div>
</div>
</div>
CodePudding user response:
You can achieve this by changing your display: inline-block
with the flex
property:
.top-level-div-container {
display: flex;
flex-wrap: wrap;
align-items: stretch;
justify-content: center;
width: 90vw;
height: 90vh;
border: solid 2px pink;
}
.top-level-div {
display: flex;
width: min-content;
overflow: auto;
max-height: 95vh;
border: solid 2px blue;
}
.top-level-div-content {
flex: 0 0 auto; /* CHANGED PROPERTY */
max-width: 100%;
resize: horizontal;
overflow: hidden;
min-width: 10vw;
width: 20vw;
height: 100%;
}
.top-level-div-content:nth-child(1) {
background: #a8f4d1;
}
.top-level-div-content:nth-child(2) {
background: #b3a1c5;
}
.top-level-div-content:nth-child(3) {
background: #d4c1d5;
}
<div >
<div >
<div > </div>
<div > </div>
<div > </div>
</div>
<div >
<div > </div>
<div > </div>
<div > </div>
</div>
</div>