How do I keep elements aligned to a parent container

Question

I am trying to have a flexbox container with 3 internal boxes, but two of them are being pushed off the parent container. There is space above the .halfcontainers div when I add text, I tried to solve this by setting the margin to 0, but it hasn't done anything.

Image of the problem - [1]: https://i.stack.imgur.com/9H4E2.png

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

.container {
    margin: 50px auto 100px auto;
    padding: 0;
    width: 800px;
    height: 500px;
    background-color: rgb(240, 240, 240);  
    border-radius: 10px;
    box-shadow: 6px 7px 8px rgba(0, 0, 0, 0.158) ;
    display: flex;
}

.leftcontainer    {
    margin: 0;
    flex: 1 1 0;
}


.rightcontainer {
    margin: 0;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    /* min-height: 100%;
    min-width: 50%; */
}


.halfcontainers {
    margin: 0;
    flex: 1;
    

}

.top {
    margin: 0;
    background-color: rgb(233, 233, 233);
    height: 100%;
    border-radius: 0 10px 0 0;
}

.bottom {
    margin: 0;
    background-color: rgb(209, 209, 209);
    height: 100%;
    border-radius: 0 0 10px 0;
} 

h1  {
    margin: 10px 10px 0px 10px;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 18px;
}

p   {
    margin: 10px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 12px;
}

<body>
    <div class="container">
        <div class="leftcontainer">left</div>
        <div class="rightcontainer">                    
                <div class="halfcontainers">
                    <div class="top">
                        <h1>Financial Stability</h1>
                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem at officia minus deleniti quae modi iste.</p>
                    </div>  
                </div>
                <div class="halfcontainers">
                    <div class="bottom">
                        <h1>24/7 Support</h1>
                        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit cumque enim nulla nesciunt iure quo nisi vitae. Libero, enim natus!</p>
                    </div>
                </div>
        </div>
    </div>

@TemaniAfif Your duplicate answer explicitly states "**You can do any of the following to prevent the margin from collapsing:** *1. Make either of your div elements inline blocks.* *2. Set overflow of #outer to auto (or any value other than visible*)." So please elaborate on why `inline-block` is not the move in this instance, and why `overflow: auto` is. It will benefit learning. — Kameron, Feb 22 '22 at 13:51
@カメロン remove the content from the div and keep only the title and you can see the difference — Temani Afif, Feb 22 '22 at 14:02

Kameron · Accepted Answer · 2022-02-22T22:11:47.897

There are a few ways to do this:

(a) Add overflow: auto; to bottom and top.

(b) Add display: inline-block; to bottom and top.

As Temani mentioned in the comments, overflow: auto; is a sure fix for the issue. Compared to inline-block which only fixes it if there is a block level element nested in the parent.

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

.container {
  margin: 50px auto 100px auto;
  padding: 0;
  width: 800px;
  height: 500px;
  background-color: rgb(240, 240, 240);
  border-radius: 10px;
  box-shadow: 6px 7px 8px rgba(0, 0, 0, 0.158);
  display: flex;
}

.leftcontainer {
  margin: 0;
  flex: 1 1 0;
}

.rightcontainer {
  margin: 0;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  /* min-height: 100%;
    min-width: 50%; */
}

.halfcontainers {
  margin: 0;
  flex: 1;
}

.top {
  margin: 0;
  background-color: rgb(233, 233, 233);
  height: 100%;
  border-radius: 0 10px 0 0;
}

.bottom {
  margin: 0;
  background-color: rgb(209, 209, 209);
  height: 100%;
  border-radius: 0 0 10px 0;
}

.bottom, 
.top {
  display: inline-block;
}

h1 {
  margin: 10px 10px 0px 10px;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 18px;
}

p {
  margin: 10px;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 12px;
}

<body>
  <div class="container">
    <div class="leftcontainer">left</div>
    <div class="rightcontainer">
      <div class="halfcontainers">
        <div class="top">
          <h1>Financial Stability</h1>
          <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem at officia minus deleniti quae modi iste.</p>
        </div>
      </div>
      <div class="halfcontainers">
        <div class="bottom">
          <h1>24/7 Support</h1>
          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit cumque enim nulla nesciunt iure quo nisi vitae. Libero, enim natus!</p>
        </div>
      </div>
    </div>
  </div>

How do I keep elements aligned to a parent container

1 Answers1