Due to design constraints, I implemented flexbox for this scenario and required the btn p elements to behave like display block. This was achieved through a post on another stack exchange thread. However, after setting the "other divs" class to 100%, it extends beyond the main parent container. The reason behind this behavior eludes me.
#outterWrapper {
display: inline-block;
height: 200px;
border: 1px solid red;
}
#container {
display: flex;
height: 200px;
flex-wrap: wrap;
}
#menu {
display: flex;
flex-basis: 100%;
}
#menu p {
margin: 0;
padding: 8px;
padding-bottom: 0;
}
.otherDivs {
height: 100%;
width: 25%;
background-color: grey;
margin-right: 5px;
}<div id="outterWrapper">
<div id="container">
<div id="menu">
<p>Btn</p>
<p>Btn</p>
<p>Btn</p>
</div>
<div class="otherDivs"></div>
</div>
</div>As seen in the example above, the grey box extends beyond the red border?