CSS: How to avoid scretching container vertically?

Question

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?

Is the goal here to ensure that the container is always accessible via scroll? — Michael Benjamin, Oct 25 '16 at 22:44
You may be looking for this: http://stackoverflow.com/q/33454533/3597276 — Michael Benjamin, Oct 25 '16 at 22:48
@Michael_B Thanks bud, but if you check the jsfiddle there u can see that while adding the text, it scretches vertically together to up and down sides :( — Patrickkx, Oct 25 '16 at 22:49
Yes, it does that because you have `align-items: center` on the container, which *vertically centers* the flex items. If you just want it to expand downward, remove that and use a margin instead: https://jsfiddle.net/yne301hf/6/ — Michael Benjamin, Oct 25 '16 at 22:52
@Patrickkx Initially say you have 3 `li`s and it is horizontally and vertically aligned; now if you add say 2 more dynamically (from a javascript code), and when that happens it should not readjust, instead should be just placed below the existing 3 `li`s. Is my understanding correct? — kukkuz, Oct 26 '16 at 07:45
@Patrickkx have added an answer, could you please check if it answers your problem? — kukkuz, Oct 26 '16 at 11:47

score 2 · Answer 1 · answered Oct 25 '16 at 22:29

2

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%;
}

answered Oct 25 '16 at 22:29

Action Coding

830
5
17

Unfortunately this is not what I need :( – Patrickkx Oct 25 '16 at 22:42
Can you expand on what you are looking for? With the code above the container expands down like you requested and is centered. I am not sure I understand what you are looking for – Action Coding Oct 25 '16 at 23:10

kukkuz · Answer 2 · 2016-10-26T11:44:10.840

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

So I removed min-height for content
Reset the ul margin-bottom to zero.

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>

Looks great my friend, but the problem is... the content doesnt scretch itself while adding new `li` elements. The content box is not flexible, it's just static, not dynamic :( — Patrickkx, Oct 26 '16 at 15:02

Luka Kerr · Answer 3 · 2016-10-25T22:55:56.380

1

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

edited Oct 25 '16 at 22:55

answered Oct 25 '16 at 22:24

Luka Kerr

4,161
7
39
50

It seems to work for me (if I understand your question properly), what exactly are you trying to achieve? – Luka Kerr Oct 25 '16 at 22:27
Your solution doesnt stay exactly in the centre of body. And the margin isn't flexible, just static. It has to be 100% dynamic brother – Patrickkx Oct 25 '16 at 22:28
I'm not sure what your after then, as my solution only moves the list down, and the margin is dynamic when adding more `li` elements – Luka Kerr Oct 25 '16 at 22:43
Yeah, but the container isnt centered vertically at start :( its static. – Patrickkx Oct 25 '16 at 22:48

CSS: How to avoid scretching container vertically?

3 Answers3