Allow horizontal overlapping divs only when width of parent is inadequate

A variable quantity of 'inner' divs will be generated and placed inside their relevant 'middle' div parent. When the number of 'inner' divs is enough to fit inside the parent I have no problem. However, when there are too many to fit, I would like them to overlap each other, by the minimum amount possible. I cannot use 'position absolute' on the 'inner' div as the amount of the overlap is not known at the time the code is generated.

I have tried using flex-shrink: 1;. I also tried to use 'inline-block', but 'inner' either tries to overflow or wrap. Is there anyway this can be done without knowing how many inner divs there are. The 'middle' div needs to be positioned absolute as this will have a variable value from the top of the page.

JS Fiddle here

<div class="middle" style="justify-content: flex-start;left: 0;top: 0;">
    <div class="inner">A</div>
    <div class="inner">A</div>
    <div class="inner">A</div>
    <div class="inner">A</div>
    <div class="inner">A</div>
    <div class="inner">A</div>
    <div class="inner">A</div>
</div>

<div class="middle" style="justify-content: flex-end;left: 0;top: 50px;">
    <div class="inner">A</div>
    <div class="inner">A</div>
</div>
div {
  box-sizing: border-box;
  font-size: 30px;
}

.middle {
  min-width: 80px;
  max-width: 80px;
  background-color: blue;
  position: absolute;
  display: flex;
  flex-flow: row nowrap;
  overflow: hidden;
}

.inner {
  min-height: 1.2rem;
  border: .1rem solid red;
  flex-shrink: 1;
  text-align: center;
  align-self: center;
  vertical-align: middle;
}


Read more here: https://stackoverflow.com/questions/67375357/allow-horizontal-overlapping-divs-only-when-width-of-parent-is-inadequate

Content Attribution

This content was originally published by TameAim at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: