Search code examples
htmlcssflexbox

display: flex and width: 100% Issue with ul Container Not Expanding to Full Width

I'm trying to make a ul container with display: flex take 100% of its parent's width. However, when the screen size is reduced, the ul doesn't maintain the 100% width. If I remove display: flex, it works as expected. Here are my HTML and CSS:

here is the codepen you should put it on a 776px width

.aboutus-container {
  background-color: #EDF2E7;
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.aboutus-content {
  display: flex;
  width: 90%;
}

.aboutus-text {
  width: 50%;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.aboutus-photo-container {
  width: 50%;
}

.aboutus-photo-container img {
  width: 100%;
  height: 100%;
}

.aboutus-card {
  list-style: none;
  display: flex;
  flex-direction: column;
  background-color: #7FA154;
  padding: 24px;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
}

.aboutus-card-container {
  display: flex;
  padding-left: 0;
  gap: 15px;
  width: 100%;  /* Ensure full width */
  box-sizing: border-box;  /* Include padding and border in width */
}
<section class='aboutus-container'>
  <div class='aboutus-content'>
    <div class='aboutus-text'>
      <h1>Sobre Nosotros</h1>
      <h3>Algun texto aca </h3>
      <p class='about-us-legend'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
      <ul class='aboutus-card-container'>
        <li class='aboutus-card'>
          <div class='about-us'>
            <p>Años de experiencia</p>
          </div>

        </li>
        <li class='aboutus-card'>
          <div class='about-us'>
            <p >Unidades construidas</p>
          </div>

        </li>
        <li class='aboutus-card'>
          <div class='about-us'>
            <p>calidad en nuestros <span style={{ display: 'block'                }}>procesos</span></p>
          </div>
        </li>
      </ul>
    </div>
    <div class='aboutus-photo-container'>
      <img src={aboutus} alt="" />
    </div>
  </div>
</section>

As you can see in the image the cards are overlapping the image and not taking the 100% of the width

Here is how the page looks on a small screen enter image description here

Solution

  • You can set min-width: 0; to the .aboutus-card class. Otherwise the min-width will be the min-width of the flex-items content and therefore overflow on small screens.

    You could also instead use flex-wrap: wrap; on .aboutus-card-container. That causes the flex-items to wrap to the next line on small screens, which may look better.