My divs overlapping when resize my browser

Question

I am very new to this and ive been trying to figure out a problem in my layout. My div.containerstacks overlap on the right side when resizing. How can i solve this? And also if there is anything else that you think i should do different i would be glad to hear.

 `.actionscontainer { border: 1px solid rgb(172, 178, 189); max-width: 50%; text-align: center; margin: auto; margin-top: 15px; background-color: #161616; } ` `.containerstacks { display: flex; width: 100%; background-color: #161616; } ` `.buttonstacks { background-color: #161616; border: none; color: white; text-align: center; font-size: 16px; opacity: 0.6; transition: 0.3s; text-decoration: none; cursor: pointer; margin: auto; width: 100%; } `

 <div class="actionscontainer"> <div class="containerbuttons"> <button id="act1" class="buttonactionrfi" onclick="highlight(this)"><p class="p1">RFI</p></button> <div class="infoaction"> <p class="p2">(Open raise)</p> </div> <button id="act2" class="buttonactionrfi" onclick="highlight(this)"><p class="p1">vs.RFI</p></button> <div class="infoaction"> <p class="p2">(Versus open raise)</p> </div> <button id="act3" class="buttonaction3bet" onclick="highlight(this)"><p class="p1">vs.3bet</p></button> <div class="infoaction"> <p class="p2">(Versus 3bet)</p> </div> </div> <div class="containerstacks"> <button id="100bb" class="buttonstacks" onclick="highlight(this)"><p class="p1">100BB</p></button> <button id="70bb" class="buttonstacks" onclick="highlight(this)"><p class="p1">70BB</p></button> <button id="60bb" class="buttonstacks" onclick="highlight(this)"><p class="p1">60BB</p></button> <button id="50bb" class="buttonstacks" onclick="highlight(this)"><p class="p1">50BB</p></button> <button id="40bb" class="buttonstacks" onclick="highlight(this)"><p class="p1">40BB</p></button> <button id="30bb" class="buttonstacks" onclick="highlight(this)"><p class="p1">30BB</p></button> <button id="25bb" class="buttonstacks" onclick="highlight(this)"><p class="p1">25BB</p></button> <button id="20bb" class="buttonstacks" onclick="highlight(this)"><p class="p1">20BB</p></button> <button id="17bb" class="buttonstacks" onclick="highlight(this)"><p class="p1">17BB</p></button> <button id="15bb" class="buttonstacks" onclick="highlight(this)"><p class="p1">15BB</p></button> <button id="12bb" class="buttonstacks" onclick="highlight(this)"><p class="p1">12BB</p></button> <button id="10bb" class="buttonstacks" onclick="highlight(this)"><p class="p1">10BB</p></button> </div> <div class="containerposition"> <button id="EP" class="buttonpos" onclick="highlight(this)"><p class="p1">EP</p></button> <button id="MP" class="buttonpos" onclick="highlight(this)"><p class="p1">MP</p></button> <button id="MP2" class="buttonpos" onclick="highlight(this)"><p class="p1">MP2</p></button> <button id="HJ" class="buttonpos" onclick="highlight(this)"><p class="p1">HJ</p></button> <button id="CO" class="buttonpos" onclick="highlight(this)"><p class="p1">CO</p></button> <button id="BTN" class="buttonpos" onclick="highlight(this)"><p class="p1">BTN</p></button> <button id="SB" class="buttonpos" onclick="highlight(this)"><p class="p1">SB</p></button> </div> </div>

Answer 1

You need to fix the extra characters you have in your snippet. I fixed them in the snippet below.

In order to get the behavior that you want, you need to set the flex-flow to row wrap so that your items will wrap to the next line.

Then you need to give the items a flex value of 1 in order to make them stay in their container.

 .actionscontainer { border: 1px solid rgb(172, 178, 189); max-width: 50%; text-align: center; margin: auto; margin-top: 15px; background-color: #161616; }.containerstacks { display: flex; width: 100%; background-color: #161616; flex-flow: row wrap; /* Set to row wrap */ }.buttonstacks { background-color: #161616; border: none; color: white; text-align: center; font-size: 16px; opacity: 0.6; transition: 0.3s; text-decoration: none; cursor: pointer; margin: auto; width: 100%; flex: 1; /* Set flex to 1 */ }

 <div class="actionscontainer"> <div class="containerbuttons"> <button id="act1" class="buttonactionrfi" onclick="highlight(this)"><p class="p1">RFI</p></button> <div class="infoaction"> <p class="p2">(Open raise)</p> </div> <button id="act2" class="buttonactionrfi" onclick="highlight(this)"><p class="p1">vs.RFI</p></button> <div class="infoaction"> <p class="p2">(Versus open raise)</p> </div> <button id="act3" class="buttonaction3bet" onclick="highlight(this)"><p class="p1">vs.3bet</p></button> <div class="infoaction"> <p class="p2">(Versus 3bet)</p> </div> </div> <div class="containerstacks"> <button id="100bb" class="buttonstacks" onclick="highlight(this)"><p class="p1">100BB</p></button> <button id="70bb" class="buttonstacks" onclick="highlight(this)"><p class="p1">70BB</p></button> <button id="60bb" class="buttonstacks" onclick="highlight(this)"><p class="p1">60BB</p></button> <button id="50bb" class="buttonstacks" onclick="highlight(this)"><p class="p1">50BB</p></button> <button id="40bb" class="buttonstacks" onclick="highlight(this)"><p class="p1">40BB</p></button> <button id="30bb" class="buttonstacks" onclick="highlight(this)"><p class="p1">30BB</p></button> <button id="25bb" class="buttonstacks" onclick="highlight(this)"><p class="p1">25BB</p></button> <button id="20bb" class="buttonstacks" onclick="highlight(this)"><p class="p1">20BB</p></button> <button id="17bb" class="buttonstacks" onclick="highlight(this)"><p class="p1">17BB</p></button> <button id="15bb" class="buttonstacks" onclick="highlight(this)"><p class="p1">15BB</p></button> <button id="12bb" class="buttonstacks" onclick="highlight(this)"><p class="p1">12BB</p></button> <button id="10bb" class="buttonstacks" onclick="highlight(this)"><p class="p1">10BB</p></button> </div> <div class="containerposition"> <button id="EP" class="buttonpos" onclick="highlight(this)"><p class="p1">EP</p></button> <button id="MP" class="buttonpos" onclick="highlight(this)"><p class="p1">MP</p></button> <button id="MP2" class="buttonpos" onclick="highlight(this)"><p class="p1">MP2</p></button> <button id="HJ" class="buttonpos" onclick="highlight(this)"><p class="p1">HJ</p></button> <button id="CO" class="buttonpos" onclick="highlight(this)"><p class="p1">CO</p></button> <button id="BTN" class="buttonpos" onclick="highlight(this)"><p class="p1">BTN</p></button> <button id="SB" class="buttonpos" onclick="highlight(this)"><p class="p1">SB</p></button> </div> </div>