Whenever I am trying to populate a list of item with material-list
in a display: inline-flex;
the flex doesn't responses, the list only gets align horizontally, but if I change the HTML code from material-list
to ul
it populates the list as expected. So, can anyone tell what I am doing wrong?
<div class="demo-list-content">
<material-list>
<material-list-item>
<material-icon icon="home"></material-icon>
<div class="demo-list-item">Item 1</div>
</material-list-item>
<material-list-item>
<material-icon icon="home"></material-icon>
<div class="demo-list-item">Item 1</div>
</material-list-item>
<material-list-item>
<material-icon icon="home"></material-icon>
<div class="demo-list-item">Item 1</div>
</material-list-item>
<material-list-item>
<material-icon icon="home"></material-icon>
<div class="demo-list-item">Item 1</div>
</material-list-item>
<material-list-item>
<material-icon icon="home"></material-icon>
<div class="demo-list-item">Item 1</div>
</material-list-item>
</material-list>
</div>
list.css
.demo-list-content {
margin: 24px;
}
material-list {
padding: 16px;
display: inline-flex;
}
material-list-item {
width: 200px;
display: inline;
flex-direction: column;
border: solid;
margin: 16px;
text-align: center;
}
.demo-list-item {
}