Flex layout and scrollable content without explict set width

[Disane87]

• Operating system and version (Windows, macOS, Android, iOS, Win10 Mobile): Windows 10
• Browser and version (Chrome, Firefox, Safari, IE, MS Edge, Opera 15+, Android Browser) Chrome Version 73.0.3683.86 (Offizieller Build) (64-Bit)
• [Reduced test case] https://stackblitz.com/edit/angular7-bootstrap4-contentgrid-6faccu

My markup (please dont wonder, I'm using Angular):

<div class="content">

  <div class="d-flex p-2 bd-highlight header-row">
    I'm a flexbox container!
  </div>
  <div class="d-flex bd-highlight mb-3" [ngStyle]="getStyle('content-row')">
    <div class="p-2 bd-highlight sidebar left">
      <ng-content select="[sidebar-left]"></ng-content>
    </div>
    <div class="p-2 flex-grow-1 bd-highlight main-content">
      <ng-content select="[content]"></ng-content>
    </div>
    <div class="p-2 bd-highlight sidebar right">
      <ng-content select="[sidebar-right]"></ng-content>
    </div>
  </div>

</div>

My css/scss

.bd-highlight {
    background-color: rgba(86,61,124,.15);
    border: 1px solid rgba(86,61,124,.15);
}

.overflow-y-auto {
  overflow-y: auto;
}

.content-fluid {
  height: calc(100vH - 0px);
  overflow-y: hidden;

  .main-content{
    overflow-y: auto;
  }

  .sidebar {
    // min-width: 20rem;
    overflow-y: auto; 
  }
}

I have a flex layout which looks like this:

The "head row" has a height. The row under the header row, has three columns. The middle part should be the main content where all content is projected in. The rows at the left and at the right are additional rows for content (which is in contect with the middle part).

I want to have the right and left sidebar to get the space the content needs and the middle part to fill the rest. All boxes are scrollable at the y axis.

No the problem, if I set overflow-y: auto for the sidebars, they are getting really small and the middle part really big, which I dont want:

The temporary solution is, to set a fixed with to the sidebars, but I don't want to do that, because I need the "real" width the content of the sidebars needs.

I'm not sure if this is a bug or some dumb things while using the flex utils but it behaves pretty strange in my opinion.

It would be great, If you can assist me to a solution.

[Disane87]

Unfortunatly somebody has replied here but deleted his comment. Apperently the following css works pretty fine:

display: contents

You should be aware of the compatibility: https://caniuse.com/#feat=css-display-contents We have a business software, so ignoring all the mobile and tv stuff should be pretty okay. Since MS will use Chromium for the next generation of Edge, it will be okay too.

[herbalite]

@Disane87 I made the comment, but after working a bit more with it, I found that in Firefox at least the sidebars would not show a scroll bar anymore, no matter what I did. So I felt the solution was not good enough.

[ysds]

Sorry, but we cannot help with how-to or general troubleshooting issues here; only bug reports and feature requests. You'll want to ask around in the official Slack team or Stack Overflow. See our readme for more details.

---

This is a saved reply.