In my case, body (and html) element returns to normal after removing the properties from display: flex; group. After my investigation, I discovered that every element with an automatically calculated width must be in an element that has height and width and wraps all children going all the way to the body. After adding some overflow:auto; position:relative; to the parent elements, the body scales correctly with display flex nested in display flex.
@import '../../variables.scss';
:host {
overflow: auto; // added this line
}
.top-bar {
display: flex;
flex-direction: row;
padding: 10px;
box-shadow: $shadow;
position: relative;
.search-item {
flex: 1;
margin: 0 1em;
display: flex;
flex-direction: row;
position: relative;
input {
margin: 0;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-right-width: 0px;
flex: 1;
width: 1px;
}
button {
margin: 0;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
border: 1px solid #ccc;
border-left-width: 0px;
box-shadow: inset $shadow;
}
}
button.icon-only {
border: none;
background-color: transparent;
}
}
menu looks like this:
before:
after:
