Текст, переполненный из 100% высоты и 100% ширины div

Привет, поэтому у меня есть div, у которого есть всего две картинки и, как не столько текст, но, несмотря на это, текст выливается из контейнера, и это проблема. Моя цель состоит в том, чтобы иметь два отдельных контейнера, список внизу. Есть ли гладкий способ, которым я могу это сделать? Мне просто нужно избавиться от переполнения и удержать список в отдельном контейнере. Список может быть в одном контейнере, но я не слишком уверен, что бы эта структура выглядела бы, потому что это должен был быть div с одной верхней строкой (верхняя строка оставила бы + правый раздел) и нижнюю строку ( который будет вертикальным списком). Кроме того, эта проблема обнаруживается только на мобильных устройствах, насколько я знаю, а в фрагменте вы видите, что это еще хуже, чем здесь. Но я не слишком уверен, что делать; контейнер - это 100% ширина и 100% высота уже. Наконец, список должен появиться после первого контейнера.

* {
  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>

html,css,

0

Ответов: 1

1 принят 

* {
  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-->

Раскомментируйте высоту, установленную на «.container» вне медиа-запроса. Внутри первого медиа-запроса на «.container» установите высоту в auto, чтобы эта высота уже была установлена.

HTML, CSS,
Похожие вопросы
Яндекс.Метрика