Vfrdtyky

I'm using a flexed div. Right now when I add a lot of text inside it somehow it makes the divs near to move and lose their position, hope you guys could help out.

picture 1:

picture 2:

As you see in pictures, where there is not much text everything works fine, but a little bit of lorem and everything goes bad - and the sizes inside the divs also changes even though I used flex-grow of 3 on each of them

html:

<section id='portfolio'>

<h1>My Projects</h1>

      <div class="slider">

        <div class="left">

          <span class="left-arrow"></span> </div>

        <ul> 

          <li class="slider-item">

            <div class="app">

              <img src="./images/movies.jpg" alt="">

              <ul>

                <li>Name: Movies WebApp</li>

                <li>Description: Manage movise stock Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae asperiores obcaecati quaerat fugit nisi dolore optio possimus facere ratione, maiores dicta earum aut tempora unde facilis vitae vero, quas totam.</li>

                <li>Backend: -</li>

                <li>Frontend: Angular, CSS, Html</li>

                <li>DB: -</li>



              </ul>

          </li>           

        </ul>

        <div class="right"><span class="right-arrow"></span></div>

        <ol class="pagination">

        </ol>

      </div>

      </div>



    </section>

css:

.slider {

  min-width: 100%;

  flex-wrap: wrap;

  display: flex;

  justify-content: center;

}



.slider ul {

  flex-grow: 10;

  min-height: 300px;

  justify-content: center;

}



.slider ul .slider-item {

  min-height: 300px;

  display: flex;

  position: relative;

}



.app {

  padding: 20px;

  width: 100%;

  display: flex;

  flex-direction: row;

  justify-content: center;

  align-items: center;

  background-color: rgb(0, 0, 0);

  overflow: hidden;

  box-sizing: border-box;

}

.app img {

  min-width: 500px;

  height: 300px;

  flex-grow: 3;

}

.app ul {

  overflow: hidden;

  display: flex;

  flex-direction: column;

  margin-left: 20px;

  color: black;

  width: 100%;

  flex-grow: 3;

  justify-content: center;

  background-color: aqua;

}



.app ul li {

  flex-grow: 1;

}



.right,

.left {

  padding: 20px;

  flex-grow: 1;

  position: relative;

  display: flex;

  justify-content: center;

  align-items: center;

  text-align: center;

  transition: 0.3s;

  position: relative;

  min-width: 40px;

  flex-wrap: nowrap;

}



.left-arrow {

  position: absolute;

  left: 30px;

  width: 20px;

  height: 20px;

  border-left: 2px solid rgb(163, 163, 163);

  border-bottom: 2px solid rgb(163, 163, 163);

  transform: rotate(45deg);

  cursor: pointer;

  transition: 0.3s;

}



.right-arrow {

  position: absolute;

  right: 30px;

  width: 20px;

  height: 20px;

  border-right: 2px solid rgb(163, 163, 163);

  border-bottom: 2px solid rgb(163, 163, 163);

  transform: rotate(-45deg);

  cursor: pointer;

  transition: 0.5s;

}

Just remove the "flex-wrap: wrap;" from the slider class, that is being problem with your example. Just follow the below code -:

.slider {

  min-width: 100%;

  display: flex;

  justify-content: center;

}