CSS how to break flow in just one direction - css

Question

Motivation
CSS does not allow styling the options of an html select component, so I'm building a custom "component" to do so.
The challenge is this
Along the x-direction it needs to keep the inline flow.
Along the y-direction, it needs to be able to overlap content below it.
Here's an example (does not break flow)
http://jsfiddle.net/4tyvLmqn/1
html
<div class="dropdown">
<div class="item selected">asdflkhj asdf adf</div>
<div class="item">b</div>
<div class="item">c</div>
<div class="item">ad fds adfs dfsa fsd fasd</div>
<div class="item">e</div>
</div>
<hr />
This should not move down
<hr />
JS (click handler - there may be a pure CSS way to do this)
document.querySelector('.dropdown .selected').addEventListener('click', e => {
e.target.parentElement.classList.toggle('isOpen')
})
SCSS
.dropdown {
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
user-select: none;
border: 1px solid gray;
}
.item {
visibility: hidden;
height: 0;
&.selected {
visibility: visible;
cursor: pointer;
height: auto;
}
.isOpen & {
visibility: visible;
height: auto;
}
}

Answer 1

Simply keep a fixed height then adjust overflow (visible/hidden). You can also consider a max-height in case you will have a lot of elements.
const dropdown = document.querySelector('.dropdown');
dropdown.addEventListener('click', e => {
dropdown.classList.toggle('isOpen')
});
.dropdown {
display: inline-flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
user-select: none;
border: 1px solid gray;
height: calc(1em + 2 * 0.5em);
overflow: hidden;
}
.isOpen {
overflow: visible;
}
.background {
background-color: #fff;
z-index: 1;
border: inherit;
margin: -1px;
max-height: calc(5*(1em + 2 * 0.5em));
}
.isOpen .background {
overflow:auto;
flex-shrink:0;
}
.item {
padding: 0.5em;
cursor: pointer;
}
<div class="dropdown">
<div class="background">
<div class="item">Select an Item</div>
<div class="item">b</div>
<div class="item">c</div>
<div class="item">ad fds adfs dfsa fsd fasd</div>
<div class="item">e</div>
<div class="item">ad fds adfs dfsa fsd fasd</div>
<div class="item">e</div>
<div class="item">ad fds adfs dfsa fsd fasd</div>
<div class="item">e</div>
</div>
</div>
<hr /> This should not move down
<hr />

Answer 2

Snippet here seems not to be working with CSS3. I have created a JSFiddle for this: http://jsfiddle.net/42mpa6wn/
Javascript:
document.querySelector('.dropdown .selected').addEventListener('click', e => {
e.target.parentElement.parentElement.classList.toggle('isOpen')
})
CSS:
.dropdown {
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
user-select: none;
border: 1px solid gray;
background: white;
height:25px;
width:200px;
position:relative;
}
.isOpen .itemlist{
position: absolute;
background: white;
width:inherit;
top:calc(100% - 20px);
}
.item {
visibility: hidden;
height: 0;
&.selected {
visibility: visible;
cursor: pointer;
height: auto;
}
.isOpen & {
visibility: visible;
height: auto;
}
}
HTML:
<hr />
This should not move
<hr />
This should not move
<hr />
<div class="dropdown">
<div class="itemlist">
<div class="item selected">asdflkhj asdf adf</div>
<div class="item">b</div>
<div class="item">c</div>
<div class="item">ad fds adfs dfsa fsd fasd</div>
<div class="item">e</div>
</div>
</div>
<hr />
This should not move down
<hr />
Basically, you want .dropdown to be relative to the page, where we put it. also, you want .itemlist to be in absolute position when the dropdown action is triggered. You still need to beautify it