Bollate

HTML

[ANSWERED] html – Create centered scrollable container

By

Nov 20, 2022 ,

Solution 1 :

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/

Solution 2 :

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

eg.

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

Problem :

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.

Comments

Comment posted by Can’t scroll to top of flex item that is overflowing container

Does this answer your question?

Comment posted by Milos

There are couple solutions. I tried most of them without success.

Comment posted by G-Cyrillus

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 ?

Comment posted by Milos

@G-Cyrillus Yeas this answer saved my life 🙂

Comment posted by Ben Sewards

The use of first and last of type here is what holds this together when there are only 1-2 results, good solution!

Comment posted by G-Cyrillus

@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 🙁

Comment posted by Milos

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.

Comment posted by Milos

If I do that main container will not get scroll we its is needed ?

Comment posted by Milos

I just have checked the link. on the second example with the scroll, elements are cut off on the left side.

By

Related Post

HTML

[ANSWERED] html – Child div has an offset border

Nov 20, 2022
HTML

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

Nov 20, 2022
HTML

[ANSWERED] problem in selecting list item in html/css

Nov 20, 2022

You missed

HTML

[ANSWERED] javascript – Text box to display updated text and save on button click

Nov 20, 2022
HTML

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

Nov 20, 2022
HTML

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

Nov 20, 2022
HTML

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Nov 20, 2022