Question 246527 in Html Question posted in
Some basic documentation can be found here.

Html – CSS prevent div push other div out of window

I am having difficulties keeping div’s inside window. When the first div’s hover effect works it pushes other divs to the right but last div goes out of window.

I’ve tried couple of things such as set the wrapper divs width fixed, changing position to fixed etc. but none of them works.

Ultimately I am trying to do the same of :https://artsandculture.withgoogle.com/en-us/national-parks-service/parks

Thank you for your time and help.

html,
body {
  height: 100%;
  margin: 0;
}

.grow {
  display: flex;
  justify-content: center;
  height: 100vh;
  overflow-x: hidden;
}

.grow>div {
  flex-basis: 16.3%;
  flex-shrink: 0;
  transition: .5s;
  border: 1px solid yellow;
}

.grow>div:hover {
  flex-basis: 40%;
}

.grow>div:first-child:hover {
  margin-left: 25%;
}

.grow>div:last-child:hover {
  margin-right: 25%;
}

.box1{background-color:#2A75A}
.box2{background-color:#2A75A}
.box3{background-color:#2A75A}
.box4{background-color:#2A75A}
.box5{background-color:#2A75A}
.box6{background-color:#2A75A}
<div class="grow">
      <div class='box1'>
        <div class="ninetyDegreeText">Box1</div>
        <div class="centeredText">Box1Html</div>
      </div>
      <div class='box2'>
        <div class="ninetyDegreeText" >Box2</div>
        <div class="centeredText">Box2</div>
      </div>
      <div class='box3'>
        <div class="ninetyDegreeText">Box3</div>
        <div class="centeredText">Box3Html</div>
      </div>
    <div class='box4'>
        <div class="ninetyDegreeText">Box4</div>
        <div class="centeredText">Box4Html</div>
      </div>
          <div class='box5'>
        <div class="ninetyDegreeText">Box5</div>
        <div class="centeredText">Box5Html</div>
      </div>
          <div class='box6'>
        <div class="ninetyDegreeText">Box6</div>
        <div class="centeredText">Box6Html</div>
      </div>
    </div>
Tags:

2

Answers


  1. 0

    Is this solution helping you?

    html,
body {
  height: 100%;
  margin: 0;
}

.grow {
  display: flex;
  justify-content: center;
  height: 100vh;
  overflow-x: hidden;
  max-width:100%;
  width:100%;
}

.grow>div {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 16.3%;
transition: all .3s ease-in;
  border: 1px solid yellow;
}

.grow>div:hover {
  flex-basis: 40%;
}



.box1{background-color:#2A75A}
.box2{background-color:#2A75A}
.box3{background-color:#2A75A}
.box4{background-color:#2A75A}
.box5{background-color:#2A75A}
.box6{background-color:#2A75A}
    <div class="grow">
      <div class='box1'>
        <div class="ninetyDegreeText">Box1</div>
        <div class="centeredText">Box1Html</div>
      </div>
      <div class='box2'>
        <div class="ninetyDegreeText" >Box2</div>
        <div class="centeredText">Box2</div>
      </div>
      <div class='box3'>
        <div class="ninetyDegreeText">Box3</div>
        <div class="centeredText">Box3Html</div>
      </div>
    <div class='box4'>
        <div class="ninetyDegreeText">Box4</div>
        <div class="centeredText">Box4Html</div>
      </div>
          <div class='box5'>
        <div class="ninetyDegreeText">Box5</div>
        <div class="centeredText">Box5Html</div>
      </div>
          <div class='box6'>
        <div class="ninetyDegreeText">Box6</div>
        <div class="centeredText">Box6Html</div>
      </div>
    </div>
    Login or Signup to reply.
  2. 0

    Could something like this work? It doesn’t work like the example provided, but it keeps all elements inside the viewport.

    It changes the flex-basis to 0, to ensure they all have an equal width. When an element gets hovered, it changed that elements view-basis, and the others shrink because of flex-basis: 0;, to keep them equal.

    This code was causing a lot of unwanted issues, so I removed it:

    .grow>div:first-child:hover {
  margin-left: 25%;
}

.grow>div:last-child:hover {
  margin-right: 25%;
}

    And none of your background-colors worked because of an invalid HEX value.

    html,
body {
  height: 100%;
  margin: 0;
}

.grow {
  display: flex;
  justify-content: center;
  height: 100vh;
  overflow-x: hidden;
}

.grow>div {
  flex-grow: 1;
  flex-basis: 0;
  flex-shrink: 0;
  transition: flex-basis 500ms ease-in-out;
  border: 1px solid yellow;
}

.grow>div:hover {
  flex-basis: 40%;
}

.box1{background-color:#1A75AA}
.box2{background-color:#2B75AA}
.box3{background-color:#3C75AA}
.box4{background-color:#4D75AA}
.box5{background-color:#5E75AA}
.box6{background-color:#6F75AA}
    <div class="grow">
      <div class='box1'>
        <div class="ninetyDegreeText">Box1</div>
        <div class="centeredText">Box1Html</div>
      </div>
      <div class='box2'>
        <div class="ninetyDegreeText" >Box2</div>
        <div class="centeredText">Box2</div>
      </div>
      <div class='box3'>
        <div class="ninetyDegreeText">Box3</div>
        <div class="centeredText">Box3Html</div>
      </div>
    <div class='box4'>
        <div class="ninetyDegreeText">Box4</div>
        <div class="centeredText">Box4Html</div>
      </div>
          <div class='box5'>
        <div class="ninetyDegreeText">Box5</div>
        <div class="centeredText">Box5Html</div>
      </div>
          <div class='box6'>
        <div class="ninetyDegreeText">Box6</div>
        <div class="centeredText">Box6Html</div>
      </div>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search