Sam Assoum Sam Assoum - 2 months ago 28
CSS Question

Flex display ul list height

I have a ul list that I'm displaying with

display:flex
.

I'd like each list item's height to be auto, but all the list items are expanding to match the same height as the list item with the largest height.

Here is a fiddle showing the issue:

<ul class="home_slider">
<li id="one">one</li>
<li id="two">two</li>
<li id="three">three</li>
<li id="four">four</li>
</ul>


CSS

.home_slider{
display:flex;
list-style-type:none;
}
.home_slider li{
width:80px;
height:auto;
}
#one{
height:140px;
}
#two,#three,#four{
height:auto;
}

Answer

Add align-items: flex-start to your flexbox and they will take auto height:

.home_slider {
  display: flex;
  align-items: flex-start;
  list-style-type: none;
}

The list items are expanding to match the same height as the list item with the largest height because align-items by default computes to stretch.

$('.home_slider > li:first').addClass('active');

$('#right').click(function() {
  $('.active').next().addClass('active').prev().removeClass('active');
  $('.home_slider > li:last').after($('.home_slider > li:first'));
});

$('#left').click(function() {
  $('.home_slider > li:first').before($('.home_slider > li:last'));
  $('.active').prev().addClass('active').next().removeClass('active');
});
.nav_buttons {
  display: inline-flex;
  color: #fff;
  padding: 16px;
}
#left {
  margin-right: 8px;
  background: grey;
  padding: 4px;
}
#right {
  background: grey;
  padding: 4px;
}
#right:hover,
#left:hover {
  cursor: pointer;
  opacity: 0.8;
}
.home_slider {
  display: flex;
  align-items: flex-start;
  list-style-type: none;
}
.home_slider li {
  width: 80px;
  height: auto;
  border: 0px solid black;
}
#one {
  background: red;
  height: 140px;
}
#two {
  background: lightblue;
  height: auto;
}
#three {
  background: lightgreen;
  height: auto;
}
#four {
  background: orange;
  height: auto;
}
.active {
  border: 0px solid black !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="nav_buttons">
    <div id="left">left button</div>
    <div id="right">right button</div>
  </div>
  <ul class="home_slider">
    <li id="one">one</li>
    <li id="two">two</li>
    <li id="three">three</li>
    <li id="four">four</li>
  </ul>
</body>

Let me know you feedback on this. Thanks!

Comments