Scrollable
rows with centered content

Question

How can I get the inner div items to remain centered with complete scrolling capability?

Currently the content on the left hand side is truncated. The spacing of the items should not change and each inner div needs to remain it's own row.

See https://jsfiddle.net/mf89h3tg/13/. I have also pasted the code below.

.outer-div {
  display: block;
  overflow: auto;
  border-style: dashed;
  border-width: 2px;
  border-color: blue;
  margin: 100px;
}

.inner {
  display: flex;
  justify-content: center;
}

<div class="outer-div">
  <div class="inner">
    <button>
      Hello
    </button>
    <button>
      Hello
    </button>
    <button>
      Hello
    </button>
    <button>
      Hello
    </button>
    <button>
      Hello
    </button>
    <button>
      Hello
    </button>
    <button>
      Hello
    </button>
    <button>
      Hello
    </button>
    <button>
      Hello
    </button>
    <button>
      Hello
    </button>
    <button>
      Hello
    </button>
    <button>
      Hello
    </button>
  </div>
  <div class="inner">
    <button>
      World
    </button>
    <button>
      World
    </button>
    <button>
      World
    </button>
    <button>
      World
    </button>
    <button>
      World
    </button>
    <button>
      World
    </button>
    <button>
      World
    </button>
    <button>
      World
    </button>
    <button>
      World
    </button>
    <button>
      World
    </button>
    <button>
      World
    </button>
    <button>
      World
    </button>
    <button>
      World
    </button>
    <button>
      World
    </button>
    <button>
      World
    </button>
    <button>
      World
    </button>
    <button>
      World
    </button>
  </div>
</div>

I've tried variations on the flex display to no avail.

score 0 · Answer 1 · answered May 31 '23 at 18:37

0

You could use margin-inline: auto; to center the row.

See this CodePen if it solves your problem.

answered May 31 '23 at 18:37

Torben

86
5

score -1 · Answer 2 · answered May 31 '23 at 18:52

Add the center tag let your button be inside of the tag

 <div class="outer-div">
  <div class="inner">
  <center>
    <button>
      Hello
    </button>
    <button>
      Hello
    </button>
    <button>
      Hello
    </button>
    <button>
      Hello
    </button>
    <button>
      Hello
    </button>
    <button>
      Hello
    </button>
    <button>
      Hello
    </button>
    <button>
      Hello
    </button>
    <button>
      Hello
    </button>
    <button>
      Hello
    </button>
    <button>
      Hello
    </button>
    <button>
      Hello
    </button>
  </div>
  <div class="inner">
    <button>
      World
    </button>
    <button>
      World
    </button>
    <button>
      World
    </button>
    <button>
      World
    </button>
    <button>
      World
    </button>
    <button>
      World
    </button>
    <button>
      World
    </button>
    <button>
      World
    </button>
    <button>
      World
    </button>
    <button>
      World
    </button>
    <button>
      World
    </button>
    <button>
      World
    </button>
    <button>
      World
    </button>
    <button>
      World
    </button>
    <button>
      World
    </button>
    <button>
      World
    </button>
    <button>
      World
    </button>
   </center>
  </div>
</div>

Scrollable rows with centered content

2 Answers2

Scrollable
rows with centered content