Create centered scrollable container

Question

I have one container with flexible width (100%) and block elements inside which are dynamically added.

<div class="main">
  <div class="block-element">
    <span>element1</span>
    <div>
      text1<br>
      text2
    </div>
  </div>
  <div class="block-element">
    <span>element2</span>
    <div>
      text1<br>
      text2
    </div>
  </div>
</div>


.main {
  display: flex;
  justify-content: center;
  overflow: scroll;
  width: 100%;
}

.block-element {
    display: flex;
    align-items: center;
    border: 1px solid blue;
    padding: 5px;
    margin-left: 20px;
}

The problem is to keep elements inside container centered and to make container scrollable when size of its block elements become larger then size of container.

The main problem is that I can keep elements centered only with flexbox, but in that case scrollable content on the left side is cut (well known problem with flex layout).

What ever I did one problem remain. Working example is here: https://jsfiddle.net/kypLg2cm/3/

Example 2 shows how content is cut off on the left side.

Does this answer your question? [Can't scroll to top of flex item that is overflowing container](https://stackoverflow.com/questions/33454533/cant-scroll-to-top-of-flex-item-that-is-overflowing-container) — Ben Sewards, Mar 04 '20 at 15:19
There are couple solutions. I tried most of them without success. — Milos, Mar 04 '20 at 19:30
what about answers below ? do you have any feed back ? does it work or not ? If not, what browser do you use here or tested with ? — G-Cyrillus, Mar 04 '20 at 22:45

G-Cyrillus · Accepted Answer · 2020-03-04T22:41:39.480

to avoid the side effects of justify-content:center, you can use margin on the children instead:

example :

.main {
  display: flex;
  overflow: scroll;
  width: 100%;
}

.block-element {
  display: flex;
  align-items: center;
  border: 1px solid blue;
  padding: 5px;
  margin-left: 20px;
}

.block-element:first-of-type {
  margin-left: auto;
}

.block-element:last-of-type {
  margin-right: auto;
}

<!-- EXAMPLE 1 -->
<div class="main">
  <div class="block-element">
    <span>element1</span>
    <div>
      text1<br> text2
    </div>
  </div>
  <div class="block-element">
    <span>element2</span>
    <div>
      text1<br> text2
    </div>
  </div>
</div>

<!-- EXAMPLE 2 -->
<div class="main">
  <div class="block-element">
    <span>element1</span>
    <div>
      text1<br> text2
    </div>
  </div>
  <div class="block-element">
    <span>element2</span>
    <div>
      text1<br> text2
    </div>
  </div>
  <div class="block-element">
    <span>element3</span>
    <div>
      text1<br> text2
    </div>
  </div>
  <div class="block-element">
    <span>element</span>
    <div>
      text1<br> text2
    </div>
  </div>
  <div class="block-element">
    <span>element4</span>
    <div>
      text1<br> text2
    </div>
  </div>
  <div class="block-element">
    <span>element5</span>
    <div>
      text1<br> text2
    </div>
  </div>
  <div class="block-element">
    <span>element6</span>
    <div>
      text1<br> text2
    </div>
  </div>
  <div class="block-element">
    <span>element7</span>
    <div>
      text1<br> text2
    </div>
  </div>
  <div class="block-element">
    <span>element8</span>
    <div>
      text1<br> text2
    </div>
  </div>
  <div class="block-element">
    <span>element9</span>
    <div>
      text1<br> text2
    </div>
  </div>
  <div class="block-element">
    <span>element10</span>
    <div>
      text1<br> text2
    </div>
  </div>
</div>

<!-- EXAMPLE 3 -->
<div class="main">
  <div class="block-element">
    <span>element1</span>
    <div>
      text1<br> text2
    </div>
  </div>
  <div class="block-element">
    <span>element2</span>
    <div>
      text1<br> text2
    </div>
  </div>
  <div class="block-element">
    <span>element3</span>
    <div>
      text1<br> text2
    </div>
  </div>
</div>

https://jsfiddle.net/za3ks0xo/

The use of first and last of type here is what holds this together when there are only 1-2 results, good solution! — Ben Sewards, Mar 04 '20 at 20:50
@BenSewards it actually works untill there is too many to show and scrolling becomes necessary. Also the initial margin-left:20px never exist on the last element. - First and last elements stands on the sides of the container if a scroll is to be. margin:auto removes extra gap when not necessary ;) added an example with 3 elements in the snippet to clarify that point ;) . thanks for the feed back op did not give :( — G-Cyrillus, Mar 04 '20 at 22:43
Thanks, this solve my problem. I set margin auto, but mistake was that I set to all elements, the point is to set it just to the first and the last element. — Milos, Mar 05 '20 at 07:32

score 0 · Answer 2 · answered Mar 04 '20 at 15:21

0

Change style of .mail overflow: scroll; to overflow-y: hidden;

eg.

.main {
   display: flex;
   justify-content: center;
   overflow-y: hidden;
   width: 100%;
}

answered Mar 04 '20 at 15:21

Bharoo Jangid

182
9

If I do that main container will not get scroll we its is needed ? – Milos Mar 04 '20 at 15:29
I just have checked the link. on the second example with the scroll, elements are cut off on the left side. – Milos Mar 05 '20 at 07:34

Create centered scrollable container

2 Answers2