CODEWITHSUNDEEP
htmlcss
Cm1602
Cm1602

Reputation: 91

Flexbox content with overflow spills out to the left and becomes unreachable

I've got the following flexbox CSS:

#penDisplay{
        display: flex;
        justify-content:space-evenly;        
        overflow:auto;
        position:absolute;
        top: 15%;
        left:2%;
        width:96%;
        height:65%;
}
#penCard{
        color:#CECECE;
        padding: 15px;
        padding-top: 0px;
        flex-shrink: 0;
        margin-right: 55px;
        width:15%;
        height: 60%;
        background: #2D3344;
        border: 11px solid #004B93;
        box-sizing: border-box;
        border-radius: 53px;

and a simple piece of HTML creating 8 of these boxes within.

I am wanting these boxes to be evenly spaced out and justified in the centre when not overflowing, and then when overflowing to scroll out from left to right. My problem is that the overflow spills over to the left as well as the right, and my scrollbar only goes right.

Below is an image of the problem I'm seeing, note the position of the scrollbar and the unreachable item to the left:

error

EDIT:

My HTML is React but there's nothing really that couldn't be done in basic HTML:

function PenCard(props){
    return (
        <div id="penCard">
            <h2><center>Pen {props.value}</center></h2>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
        </div>
    )
}

export default PenCard

.

renderCard(i) {
      return (
        <PenCard 
          value={i}
        />
      );
  }

.

      <div id="penDisplay">
      {this.renderCard(1)}
      {this.renderCard(2)}
      {this.renderCard(3)}
      {this.renderCard(4)}
      {this.renderCard(5)}
      {this.renderCard(6)}
      {this.renderCard(7)}



      </div>

Upvotes: 1

Views: 56

Answers (1)

Abin Thaha
Abin Thaha

Reputation: 4633

From your code:

justify-content: space-evenly; was causing the issue, I have changed it to justify-content: flex-start; which resolved the issue.

#penDisplay {
  display: flex;
  justify-content: flex-start;
  overflow: auto;
  position: absolute;
  top: 15%;
  left: 2%;
  width: 96%;
  height: 65%;
}
#penCard {
  color: #cecece;
  padding: 15px;
  padding-top: 0px;
  flex-shrink: 0;
  margin-right: 55px;
  width: 15%;
  height: 200px;
  background: #2d3344;
  border: 11px solid #004b93;
  box-sizing: border-box;
  border-radius: 53px;
}
<section id="penDisplay">
  <div id="penCard">
    <h2>value</h2>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    Lorem Ipsum has been the industry's standard dummy text ever since the
    1500s, when an unknown printer took a galley of type and scrambled it to
    make a type specimen book. It has survived not only five centuries, but also
    the leap into electronic typesetting, remaining essentially unchanged. It
    was popularised in the 1960s with the release of Letraset sheets containing
    Lorem Ipsum passages, and more recently with desktop publishing software
    like Aldus PageMaker including versions of Lorem Ipsum
  </div>
  <div id="penCard">
    <h2>value</h2>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    Lorem Ipsum has been the industry's standard dummy text ever since the
    1500s, when an unknown printer took a galley of type and scrambled it to
    make a type specimen book. It has survived not only five centuries, but also
    the leap into electronic typesetting, remaining essentially unchanged. It
    was popularised in the 1960s with the release of Letraset sheets containing
    Lorem Ipsum passages, and more recently with desktop publishing software
    like Aldus PageMaker including versions of Lorem Ipsum
  </div>
  <div id="penCard">
    <h2>value</h2>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    Lorem Ipsum has been the industry's standard dummy text ever since the
    1500s, when an unknown printer took a galley of type and scrambled it to
    make a type specimen book. It has survived not only five centuries, but also
    the leap into electronic typesetting, remaining essentially unchanged. It
    was popularised in the 1960s with the release of Letraset sheets containing
    Lorem Ipsum passages, and more recently with desktop publishing software
    like Aldus PageMaker including versions of Lorem Ipsum
  </div>
  <div id="penCard">
    <h2>value</h2>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    Lorem Ipsum has been the industry's standard dummy text ever since the
    1500s, when an unknown printer took a galley of type and scrambled it to
    make a type specimen book. It has survived not only five centuries, but also
    the leap into electronic typesetting, remaining essentially unchanged. It
    was popularised in the 1960s with the release of Letraset sheets containing
    Lorem Ipsum passages, and more recently with desktop publishing software
    like Aldus PageMaker including versions of Lorem Ipsum
  </div>
  <div id="penCard">
    <h2>value</h2>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    Lorem Ipsum has been the industry's standard dummy text ever since the
    1500s, when an unknown printer took a galley of type and scrambled it to
    make a type specimen book. It has survived not only five centuries, but also
    the leap into electronic typesetting, remaining essentially unchanged. It
    was popularised in the 1960s with the release of Letraset sheets containing
    Lorem Ipsum passages, and more recently with desktop publishing software
    like Aldus PageMaker including versions of Lorem Ipsum
  </div>
  <div id="penCard">
    <h2>value</h2>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    Lorem Ipsum has been the industry's standard dummy text ever since the
    1500s, when an unknown printer took a galley of type and scrambled it to
    make a type specimen book. It has survived not only five centuries, but also
    the leap into electronic typesetting, remaining essentially unchanged. It
    was popularised in the 1960s with the release of Letraset sheets containing
    Lorem Ipsum passages, and more recently with desktop publishing software
    like Aldus PageMaker including versions of Lorem Ipsum
  </div>
  <div id="penCard">
    <h2>value</h2>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    Lorem Ipsum has been the industry's standard dummy text ever since the
    1500s, when an unknown printer took a galley of type and scrambled it to
    make a type specimen book. It has survived not only five centuries, but also
    the leap into electronic typesetting, remaining essentially unchanged. It
    was popularised in the 1960s with the release of Letraset sheets containing
    Lorem Ipsum passages, and more recently with desktop publishing software
    like Aldus PageMaker including versions of Lorem Ipsum
  </div>
  <div id="penCard">
    <h2>value</h2>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    Lorem Ipsum has been the industry's standard dummy text ever since the
    1500s, when an unknown printer took a galley of type and scrambled it to
    make a type specimen book. It has survived not only five centuries, but also
    the leap into electronic typesetting, remaining essentially unchanged. It
    was popularised in the 1960s with the release of Letraset sheets containing
    Lorem Ipsum passages, and more recently with desktop publishing software
    like Aldus PageMaker including versions of Lorem Ipsum
  </div>
  <div id="penCard">
    <h2>value</h2>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    Lorem Ipsum has been the industry's standard dummy text ever since the
    1500s, when an unknown printer took a galley of type and scrambled it to
    make a type specimen book. It has survived not only five centuries, but also
    the leap into electronic typesetting, remaining essentially unchanged. It
    was popularised in the 1960s with the release of Letraset sheets containing
    Lorem Ipsum passages, and more recently with desktop publishing software
    like Aldus PageMaker including versions of Lorem Ipsum
  </div>
  <div id="penCard">
    <h2>value</h2>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    Lorem Ipsum has been the industry's standard dummy text ever since the
    1500s, when an unknown printer took a galley of type and scrambled it to
    make a type specimen book. It has survived not only five centuries, but also
    the leap into electronic typesetting, remaining essentially unchanged. It
    was popularised in the 1960s with the release of Letraset sheets containing
    Lorem Ipsum passages, and more recently with desktop publishing software
    like Aldus PageMaker including versions of Lorem Ipsum
  </div>
  <div id="penCard">
    <h2>value</h2>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    Lorem Ipsum has been the industry's standard dummy text ever since the
    1500s, when an unknown printer took a galley of type and scrambled it to
    make a type specimen book. It has survived not only five centuries, but also
    the leap into electronic typesetting, remaining essentially unchanged. It
    was popularised in the 1960s with the release of Letraset sheets containing
    Lorem Ipsum passages, and more recently with desktop publishing software
    like Aldus PageMaker including versions of Lorem Ipsum
  </div>
</section>

Upvotes: 1

Related Questions