CODEWITHSUNDEEP
htmltwitter-bootstrapcssflexbox
Patrickkx
Patrickkx

Reputation: 1870

CSS: How to avoid scretching container vertically?

I have a flex container, with few li elements inside. While adding more li elements inside, the container scretches together in above and down sides. I don't want it to move any further in up, only in down direction.

You can check it on my JSfiddle

Try to add few li elements, you will see that container is scretching. How to block it?

Upvotes: 2

Views: 70

Answers (3)

kukkuz
kukkuz

Reputation: 42372

First of all, I am using some Jquery here for adding new elements:

  1. So I removed min-height for content

  2. Reset the ul margin-bottom to zero.

  3. The new items are added via JS and are positioned absolutely:

    ul.list-group {
  margin-bottom: 0;
  position: relative;
}
ul .list-group-item.counter{
  position:absolute;
  width: 100%;
}

    The new items are listed one below the other giving the margin-top property:

    $('.list-group').append("<li class='list-group-item counter' style='margin-top:" + newItems * 100 + "px'>x</li>");

Let me know your feedback on this. Thanks!

var newItems = 0;
$('.fixed_btn').click(function(event) {
  $('.list-group').append("<li class='list-group-item counter' style='margin-top:" + newItems * 100 + "px'>x</li>");
  newItems++;
});
* {
  padding: 0;
  margin: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}
body {
  -webkit-font-smoothing: antialiased;
  font-family: Raleway;
}
.mainContainer {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.content {
  /*min-height: 350px;*/
  width: 300px;
  border-radius: 5px;
  background: #f2f2f2;
  border: 1px #ccc solid;
}
.list-group-item {
  height: 100px;
}
ul.list-group {
  margin-bottom: 0;
  position: relative;
}
.fixed_btn {
  position: fixed;
  top: 0;
  left: 0;
}
ul .list-group-item.counter{
  position:absolute;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<div class="mainContainer">
  <div class="content">
    <ul class='list-group'>
      <li class='list-group-item'>x</li>
      <li class='list-group-item'>x</li>
      <li class='list-group-item'>x</li>
    </ul>
  </div>
</div>

<button class="btn fixed_btn">+ Add</button>

Upvotes: 2

Luka Kerr
Luka Kerr

Reputation: 4239

If you change your .mainContainer CSS so that the height is auto. Now the list will not move up, but only will move down as you wanted as the height is flexible depending on the content:

.mainContainer {
    width: 100vw;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

Also, if you change the .content CSS so that the min-height is auto it seems to look nicer when there are fewer li elements:

.content {
    min-height: auto;
    width: 300px;
    border-radius: 5px;
    background: #f2f2f2;
    border: 1px #ccc solid;
}

Updated (again) Fiddle, try to add more li elements

If your looking for the list to stay in position, but when more elements are added to have a scroll but still be fixed see this other Fiddle

Upvotes: 1

Action Coding
Action Coding

Reputation: 830

Try this out and see if it is what you are going for. If not I may need some additional info.

.mainContainer {
   width: 100vw;
   height: 100vh;
   display: block;
   align-items: center;
   justify-content: center;
}

.content {
   min-height: 350px;
   width: 300px;
   border-radius: 5px;
   background: #f2f2f2;
   border: 1px #ccc solid;
   position:relative;
   margin:0 auto;
   display:block;
   top:50%;
   margin-top:-25%;
}

Upvotes: 2

Related Questions