Overflow difference between Chrome and Edge - html

Question

I notice a difference between Chrome and Edge concerning overflow behavior.
As you can see running the following code, in Chrome this shows only the vertical scrollbar (rightly, in my opinion), while in Edge there are both scrollbars.
Is there a reason for this? How can I make Edge behave in the same way as Chrome does?
Thanks!
.container1 {
display: flex;
flex-flow: column;
align-items: flex-start;
}
.container2 {
display: flex;
flex-flow: column;
align-items: flex-start;
}
.container3 {
max-height: 150px;
overflow: auto;
}
.content {
width: 500px;
height: 200px;
background-color: blue;
}
<div class="container1">
<div class="container2">
<div class="container3">
<div class="content"></div>
</div>
</div>
</div>

Answer 1

Here's what I think is happening:
When the overflow is triggered (because height: 200px on the .content element is taller than the max-height: 150px on the parent), a vertical scrollbar is generated.
This scrollbar actually takes up width. The .content element is set to width: 500px. But once the scrollbar is generated, the width increases to 517px in Chrome. Note that scrollbar width varies among browsers.
Chrome appears to factor in or just ignore the vertical scrollbar width. It refrains from launching a horizontal scrollbar. Edge seems to consider the vertical scrollbar width as an overflow, and therefore launches the horizontal scrollbar.
There could be any number of reasons for this difference in behavior, including a different order of rendering elements and objects.
One thing is clear, if you move the width: 500px from the .content to the parent, the horizontal scroll problem is solved.
.container1 {
display: flex;
flex-flow: column;
align-items: flex-start;
}
.container2 {
display: flex;
flex-flow: column;
align-items: flex-start;
}
.container3 {
max-height: 150px;
overflow: auto;
width: 500px; /* new */
}
.content {
/* width: 500px; */
height: 200px;
background-color: blue;
}
<div class="container1">
<div class="container2">
<div class="container3">
<div class="content"></div>
</div>
</div>
</div>
jsFiddle demo

Answer 2

Try this : overflow-y: auto;
Link : https://www.w3schools.com/cssref/css3_pr_overflow-y.asp

Answer 3

After many attempts I have found a workaround by removing align-items: flex-start and replacing display: flex with display: inline-flex. Here's the new code:
.container1 {
display: inline-flex;
flex-flow: column;
}
.container2 {
display: inline-flex;
flex-flow: column;
}
.container3 {
max-height: 150px;
overflow: auto;
}
.content {
width: 500px;
height: 200px;
background-color: blue;
}
<div class="container1">
<div class="container2">
<div class="container3">
<div class="content"></div>
</div>
</div>
</div>
Hope it will help someone.