overflow: auto inside flex element

August 12, 2022

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 class="top-level-div-container">
  <div class="top-level-div">
    <div class="top-level-div-content"> </div>
    <div class="top-level-div-content"> </div>
    <div class="top-level-div-content"> </div>
  </div>
  <div class="top-level-div">
    <div class="top-level-div-content"> </div>
    <div class="top-level-div-content"> </div>
    <div class="top-level-div-content"> </div>
  </div>
</div>

>Solution :

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 class="top-level-div-container">
  <div class="top-level-div">
    <div class="top-level-div-content"> </div>
    <div class="top-level-div-content"> </div>
    <div class="top-level-div-content"> </div>
  </div>
  <div class="top-level-div">
    <div class="top-level-div-content"> </div>
    <div class="top-level-div-content"> </div>
    <div class="top-level-div-content"> </div>
  </div>
</div>