Flex & space-around are intersecting the content-CodePudding

I have a container that's scrolling horizionally with checkboxes in it. When a box is checked, a text apears. I want to keep the functionality of the items growing from both sides. The thing is that when some checkboxes are checked, the first one is hidden and you cannot scroll to it:

.container {
  white-space: nowrap;
  text-align: center;
  display: flex;
  overflow-x: scroll;
  justify-content: space-around;
  align-items: stretch;
}

.item {
  transition: 0.5s ease;
  height: 40px;
  justify-content: center;
  text-align: center;
}

label {
  font-size: 0;
  transition: 0.5s ease;
}

input:checked~label {
  font-size: 20px;
}

<div >
  <div >
    <input type="checkbox" id="1"></input>
    <label for="1">1111111111111111111111111</label>
  </div>
  <div >
    <input type="checkbox" id="1"></input>
    <label for="2">22222222222222222222222222222222222</label>
  </div>
  <div >
    <input type="checkbox" id="1"></input>
    <label for="3">333333333333333333333333333333</label>
  </div>
</div>

Is there a way to keep the transition coming from the center, but still let the user scrolling all the way to the start and the end?

Thanks!

CodePudding user response：

Just done by 2 actions:

Remove the justify-content: space-around; from your .container
Add margin:auto; to your .item.

(Pay attention, className got replaced by class, as the CSS does not recognize the className)

DEMO

.container {
  white-space: nowrap;
  text-align: center;
  display: flex;
  overflow-x: scroll;
  /*justify-content: space-around;*/
  align-items: stretch;
}

.item {
  transition: 0.5s ease;
  height: 40px;
  justify-content: center;
  text-align: center;
  margin:auto;
}

label {
  font-size: 0;
  transition: 0.5s ease;
}

input:checked~label {
  font-size: 20px;
}

<div >
  <div >
    <input type="checkbox" id="1" />
    <label for="1">1111111111111111111111111</label>
  </div>
  <div >
    <input type="checkbox" id="1" />
    <label for="2">22222222222222222222222222222222222</label>
  </div>
  <div >
    <input type="checkbox" id="1" />
    <label for="3">333333333333333333333333333333</label>
  </div>
</div>

CodePudding user response：

Ooh!!

That's a good one..

It took months from me to solve before.

It's very easy and tricky bro.

Just make your justify-content: flex-start; and then add this flex-grow: 1; for your children which are .item which will seams like a space-around effect.

That's the code:

.container {
    white-space: nowrap;
    text-align: center;
    overflow-x: scroll;
    display: flex; align-items: stretch;
    justify-content: flex-start;     /* ••• this one ••• */
}
.item {
    transition: 0.5s ease;
    height: 40px; text-align: center;
      display: flex; justify-content: center;
      flex-grow: 1;                    /* ••• and this one ••• */
}
label { font-size: 0; transition: 0.5s ease; }
input:checked~label { font-size: 20px; }

<div >
    <div >
        <input type="checkbox" id="1"></input>
        <label for="1">1111111111111111111111111</label>
    </div>
    <div >
        <input type="checkbox" id="2"></input>
        <label for="2">22222222222222222222222222222222222</label>
    </div>
    <div >
        <input type="checkbox" id="3"></input>
        <label for="3">333333333333333333333333333333</label>
    </div>
</div>

CodePudding user response：

justify-content: space-around; from the container and use justify-content: space-between; instead.