CODEWITHSUNDEEP
htmlcss
Shinji-san
Shinji-san

Reputation: 1001

Text overflowing out of 100% height and 100% width div

Hello so I have a div that has a mere two pictures and like not that much text, but despite this the text is spilling out of its container and it's an issue. My goal is to have two separate containers, the list at the bottom. Is there a smooth way I can accomplish this? I just need to get rid of the overflowing and be able to keep the list in a separate container. The list can be in the same container but I'm not really too sure what that structure would even look like because it would have to be a div with one top row(top row would have left + right section) and a bottom row(which would be vertical list). Also this is a problem only found on mobile as far as I know, and in the snippet you see it's even worse than what it looks like here. But I'm not too sure what to do; container is 100% width and 100% height already. Lastly, the list has to still appear after the first container.

* {
  margin: 0;
}
body {
  background-color: green;
}
html,
body {
  height: 100%;
}
.left {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-around;
  order: 1;
  width: 45%;
}
.middle {
  display: flex;
  flex-flow: column wrap;
  order: 2;
  width: 45%;
  height: 100%;
}
.list ul {
  list-style: none;
  padding: 0;
}
.list a {
  text-decoration: none;
  color: inherit;
}
#bigwrap {
  height: 100%;
}
.container {
  display: flex;
  position: relative;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: stretch;
  height: 100vh;
  width: 80%;
  margin: 5% auto 8% auto;
  background-color: white;
}
.middle p:first-child {
  margin-top: 8%;
}
.list ul {
  list-style: none;
  padding: 0;
}
.list a {
  text-decoration: none;
  color: inherit;
}
li {
  list-style-type: none;
  font-size: 18px;
}
.lihead {
  font-size: 24px;
  margin-bottom: 1%;
}
.stuff {
  background-color: white;
  margin: auto;
  width: 70%;
}
.stuff ul li {
  margin-bottom: 2%;
}
.center {
  text-align: center;
}
.center1 {
  text-align: center;
  color: green;
  font-size: 28px;
}
.tpoint {
  font-size: 24px;
  color: orange;
}
.mtop {
  margin-top: 2%;
}
a {
  text-decoration: none;
  color: orange;
}
.foot {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
.foot div {
  margin-right: 1%;
}
.container .box {
  border: 2px solid red;
}
@media all and (max-width: 900px) {
  #nav {
    flex-direction: column;
    /*updated*/
    margin-bottom: 7%;
  }
  #nav ul {
    padding-left: 0;
    /*added*/
  }
  #nav li {
    flex: 1 1 100%;
    /*updated*/
    padding: 5px;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
  }
  #nav li a {
    text-align: center;
    padding: 5px;
    margin: 5px;
  }
  #bigwrap {
    width: 100%;
  }
  .container {
    flex-flow: row wrap;
    min-height: 100vh;
    width: 100%;
  }
  .left,
  .right {
    flex: 1 100%;
  }
  .middle {
    flex-flow: row wrap;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: center;
  }
  .box {
    width: 70%;
    text-align: center;
  }
  #header2 {
    justify-content: space-around;
  }
}
@media (min-width: 900px) and (max-width: 1100px) {
  #nav {
    justify-content: space-around;
  }
  .container {
    width: 100%;
  }
}
<div id="bigwrap">
     
  <div class="container">
    
    <div class="left">
      <img src="eggs.jpg" width="209" height="205" alt="Picture of kid" />
      <img src="benedict.jpg" width="209" height="205" alt="Picture of kid">
    </div>
    
    <div class="middle">
      
      <div class="box">
        <h2> Sample list </h2>
      </div>

      <div class="box">
        <p>
          Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence.
          Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence.Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample
          sentence. Sample sentence. Sample sentence. Sample sentence.
        </p>
      </div>

      <div class="box">
        <p>
          Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence.
          Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence.Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample
          sentence. Sample sentence. Sample sentence. Sample sentence.
        </p>
      </div>
      
    </div>

  </div>

  <div class="stuff">
    <p class="center1">Sample sample</p>
    <p class="center tpoint">Sample Food</p>

    <ul>
      <li>Sample Mr.Sample
        <ul>
          <li>Samples</li>
          <li>Sammple</li>
        </ul>
      </li>

      <li>Sample
        <ul>
          <li>Sample</li>
          <li>Sample</li>
        </ul>
      </li>

      <li>Eggs
        <ul>
          <li>Sampl;e</li>
          <li>Sample</li>
        </ul>
      </li>

      <li>Sam
        <ul>
          <li>Sample</li>
          <li>List</li>
        </ul>
      </li>

      <li>Lists
        <ul>
          <li>Lists</li>
          <li>Lists</li>
        </ul>
      </li>
      
    </ul>

    <p class="center tpoint">List</p>

    <ul>
      
      <li>List
        <ul>
          <li>List</li>
        </ul>
      </li>

      <li>Sample</li>

      <li>List</li>

      <li>Ss</li>

      <li>Samples</li>

      <li>List</li>

      <li>This is a sample</li>

      <li>This is a sample</li>

    </ul>


    <p class="center tpoint">Sam</p>

    <ul>
      <li>Sample
        <ul>
          <li>Samples</li>
        </ul>

      </li>

      <li>More samples
        <ul>
          <li>This is a sample</li>
        </ul>
      </li>

    </ul>

  </div>

Upvotes: 0

Views: 369

Answers (1)

orangeh0g
orangeh0g

Reputation: 428

* {
  margin: 0;
}
body {
  background-color: green;
}
html,
body {
  height: 100%;
}
.left {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-around;
  order: 1;
  width: 45%;
}
.middle {
  display: flex;
  flex-flow: column wrap;
  order: 2;
  width: 45%;
  height: 100%;
}
.list ul {
  list-style: none;
  padding: 0;
}
.list a {
  text-decoration: none;
  color: inherit;
}
#bigwrap {
  height: 100%;
}
.container {
  display: flex;
  position: relative;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: stretch;
  height: 100vh;
  width: 80%;
  margin: 5% auto 8% auto;
  background-color: white;
}
.middle p:first-child {
  margin-top: 8%;
}
.list ul {
  list-style: none;
  padding: 0;
}
.list a {
  text-decoration: none;
  color: inherit;
}
li {
  list-style-type: none;
  font-size: 18px;
}
.lihead {
  font-size: 24px;
  margin-bottom: 1%;
}
.stuff {
  background-color: white;
  margin: auto;
  width: 70%;
}
.stuff ul li {
  margin-bottom: 2%;
}
.center {
  text-align: center;
}
.center1 {
  text-align: center;
  color: green;
  font-size: 28px;
}
.tpoint {
  font-size: 24px;
  color: orange;
}
.mtop {
  margin-top: 2%;
}
a {
  text-decoration: none;
  color: orange;
}
.foot {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
.foot div {
  margin-right: 1%;
}
.container .box {
  border: 2px solid red;
}
@media all and (max-width: 900px) {
  #bigwrap {
    width: 100%;
  }
  .container {
    flex-flow: row wrap;
    min-height: 100vh;
    width: 100%;
    height: auto;
  }
  .left,
  .right {
    flex: 1 100%;
  }
  .middle {
    flex-flow: row wrap;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: center;
  }
  .box {
    width: 70%;
    text-align: center;
  }
  #header2 {
    justify-content: space-around;
  }
}
@media (min-width: 900px) and (max-width: 1100px) {
  #nav {
    justify-content: space-around;
  }
  .container {
    width: 100%;
  }
}
<div id="bigwrap">
  <div class="container">
    <div class="left">
      <img src="eggs.jpg" width="209" height="205" alt="Picture of kid" />
      <img src="benedict.jpg" width="209" height="205" alt="Picture of kid">
    </div>
    <div class="middle">   
      <div class="box">
        <h2> Sample list </h2>
      </div>
      <div class="box">
        <p>
          Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence.
          Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence.Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample
          sentence. Sample sentence. Sample sentence. Sample sentence.
        </p>
      </div>
      <div class="box">
        <p>
          Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence.
          Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence.Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample
          sentence. Sample sentence. Sample sentence. Sample sentence.
        </p>
      </div> 
    </div>
  </div> <!--end of container--> 
  <div class="stuff">
    <p class="center1">Sample sample</p>
    <p class="center tpoint">Sample Food</p>
    <ul>
      <li>Sample Mr.Sample
        <ul>
          <li>Samples</li>
          <li>Sammple</li>
        </ul>
      </li>
      <li>Sample
        <ul>
          <li>Sample</li>
          <li>Sample</li>
        </ul>
      </li>
      <li>Eggs
        <ul>
          <li>Sampl;e</li>
          <li>Sample</li>
        </ul>
      </li>
      <li>Sam
        <ul>
          <li>Sample</li>
          <li>List</li>
        </ul>
      </li>
      <li>Lists
        <ul>
          <li>Lists</li>
          <li>Lists</li>
        </ul>
      </li>     
    </ul>
    <p class="center tpoint">List</p>
    <ul>
      <li>List
        <ul>
          <li>List</li>
        </ul>
      </li>
      <li>Sample</li>
      <li>List</li>
      <li>Ss</li>
      <li>Samples</li>
      <li>List</li>
      <li>This is a sample</li>
      <li>This is a sample</li>
    </ul>
    <p class="center tpoint">Sam</p>
    <ul>
      <li>Sample
        <ul>
          <li>Samples</li>
        </ul>
      </li>
      <li>More samples
        <ul>
          <li>This is a sample</li>
        </ul>
      </li>
    </ul>
  </div> <!--end of stuff--> 
</div> <!--end of bigwrap-->

Uncomment the height set on ".container" outside of media query. Inside of first media query on ".container" set height to auto so that this overides height already set.

Upvotes: 1

Related Questions