Search code examples
cssflexboxcontainersoverflowcss-grid

How can I make a grid inside a flex container responsive in CSS without disrupting the layout of the outer flex container?

I am trying to use a grid display a list of items inside flex display. I was able to display correctly but the grid is overflowing outside the container.

My expected result was the container grows as the data on that is displayed on the grid without overflowing.

As the list goes on increasing, the list is overflowing the height of the container rather than container height increasing.

  • How can I expand the flex container without causing overflow?

Note: I've tried solutions like adding a vertical scrollbar, which works, but it's not meeting my requirements. Update: Added a recreatable html and css

.dis{
    display: flex;
    height:auto;
}

.dlist {
    display: grid;
    row-gap: 5%;
    column-gap: 10%;
    grid-template-columns: 1fr 1fr 1fr;
}

.dgrid {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    gap: 5px;
}
  <!DOCTYPE html>

<html>
   <head>
      <link rel="stylesheet" href="a.css" />
   </head>
   <body>
      <div class="dis">
         <div class="dlist">
            <article class="dgrid">
               <h3>John elizabeth</h3>
            </article>
            <article class="dgrid">
                <h3>John elizabeth</h3>
             </article>
             <article class="dgrid">
                <h3>John elizabeth</h3>
             </article>
             <article class="dgrid">
                <h3>John elizabeth</h3>
             </article>
             <article class="dgrid">
                <h3>John elizabeth</h3>
             </article>
             <article class="dgrid">
                <h3>John elizabeth</h3>
             </article>
             <article class="dgrid">
                <h3>John elizabeth</h3>
             </article>
             <article class="dgrid">
                <h3>John elizabeth</h3>
             </article>
             <article class="dgrid">
                <h3>John elizabeth</h3>
             </article>
             <article class="dgrid">
                <h3>John elizabeth</h3>
             </article>
             <article class="dgrid">
                <h3>John elizabeth</h3>
             </article>
             <article class="dgrid">
                <h3>John elizabeth</h3>
             </article>
             <article class="dgrid">
                <h3>John elizabeth</h3>
             </article>
             <article class="dgrid">
                <h3>John elizabeth</h3>
             </article>
             <article class="dgrid">
                <h3>John elizabeth</h3>
             </article>
         </div>
      </div>
   </body>
</html>

Added a screenshot where the grid is overlapping the container. The problem is the container is not growing and I am unable to figure of why the grid is overflowing and not the outer container. enter image description here

Solution

  • This is caused by the fact that you are using a gap percentage value. You will have to use other units:

    .dis {
  display: flex;
  background-color: blue;
}

.dlist {
  display: grid;
  gap: 10px;
  /* gap: 5% 10%; */
  grid-template-columns: repeat(3, 1fr);
}

.dgrid {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  gap: 5px;
  background-color: yellow;
}
    <div class="dis">
  <div class="dlist">
    <article class="dgrid">
      <h3>John elizabeth</h3>
    </article>
    <article class="dgrid">
       <h3>John elizabeth</h3>
     </article>
     <article class="dgrid">
       <h3>John elizabeth</h3>
     </article>
     <article class="dgrid">
       <h3>John elizabeth</h3>
     </article>
     <article class="dgrid">
       <h3>John elizabeth</h3>
     </article>
     <article class="dgrid">
       <h3>John elizabeth</h3>
     </article>
     <article class="dgrid">
       <h3>John elizabeth</h3>
     </article>
     <article class="dgrid">
       <h3>John elizabeth</h3>
     </article>
     <article class="dgrid">
       <h3>John elizabeth</h3>
     </article>
     <article class="dgrid">
       <h3>John elizabeth</h3>
     </article>
     <article class="dgrid">
       <h3>John elizabeth</h3>
     </article>
     <article class="dgrid">
       <h3>John elizabeth</h3>
     </article>
     <article class="dgrid">
       <h3>John elizabeth</h3>
     </article>
     <article class="dgrid">
       <h3>John elizabeth</h3>
     </article>
     <article class="dgrid">
       <h3>John elizabeth</h3>
     </article>
  </div>
</div>