0

Почему блоки 1,2,3,4 не растягиваются вниз по высоте так чтобы не было горизонтальной прокрутки на ширине экрана от 630px до 830px, ведь у блоков нет фиксированный ширины, что им может мешать растягиваться?

пример на CodePen

Flexbox почему появляется горизонтальная прокрутка?[1]

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700);
@import url(https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css);

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  background: #3cb371;
/*  font-size: 14px;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;*/
min-width: 300px;
/*overflow-x: hidden;*/
overflow-y: scroll;
text-rendering: optimizeLegibility;
}
/*
body {
color: #666;
font-family: "Source Sans Pro", "Helvetica", "Arial", sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.4;
}
*/

article {
/*text-decoration: none;*/
transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}

div, h2, p, figure {
margin: 0;
padding: 0;
}

.header {
color: white;
padding: 40px 0 20px;
text-align: center;
}

.header h1 {
font-size: 40px;
font-weight: bold;
}

.header h2 a {
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
color: white;
font-size: 20px;
opacity: 0.5;
}

.header h2 a:hover {
border-bottom-color: white;
opacity: 1;
}

.main-21 {
margin: 0 auto;
max-width: 1040px;
padding: 10px;
}

.column {
flex: 1;
flex-direction: column;
}

.article {
background: white;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
color: #666;
display: flex;
/*Aligns all blocks at the same height*/
/*flex: 1;*/   
flex-direction: column;
flex-basis: auto;
margin: 10px;
}

.article:hover,
.article:focus {
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
color: #444;
}

.article-image {
background: #eee;
display: block;
position: relative;
width: 100%;
/*padding-top: 75%;*/
}

.article-image img {
display: block;
/*height: 100%;*/
width: 100%;
/*left: 0;
position: absolute;
top: 0;*/
}

/*.article-image.is-3by2 {
padding-top: 66.6666%;
}

.article-image.is-16by9 {
padding-top: 56.25%;
}*/

.article-body {
display: flex;
flex: 1;
flex-basis: auto;
flex-direction: column;
padding: 20px;
}

.article-title {
color: #333;
flex-shrink: 0;
font-size: 1.4em;
font-weight: 700;
line-height: 1.2;
}

.article-content {
flex: 1;
flex-basis: auto;
margin-top: 5px;
}

.article-info {
display: flex;
font-size: 0.85em;
justify-content: space-between;
margin-top: 10px;
}

/*@media screen and (min-width: 800px) {*/
@media screen and (min-width: 700px) {
  .columns,
  .column {
    display: flex;
  }
}

@media screen and (min-width: 1000px) {
  .first-article {
    flex-direction: row;
  }

  .first-article .article-body {
    flex: 1;
  }

  .first-article .article-image {
    /*height: 300px;*/
    /*order: 2;*/
    padding-top: 0;
    /*width: 400px;*/
    width: 100%;
    overflow: hidden;
  }

  .main-column {
    /*flex: 3;*/
    flex: 1;
  }

  .nested-column {
    flex: 2;
  }
}

/**/
main .article-image h2{
  position: absolute;
  color: #fff;
  background: rgba(0,0,0,0.5);
  padding: 10px;
  width: 100%;
  bottom: 0;
}
<main class="main columns">
  <section class="column main-column">

   <article class="article first-article" href="#">
    <figure class="article-image is-4by3">
      <h2>Toronto Concert Band – 2017 Fall Concert</h2>
      <!--<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/image-01-lo.jpg" alt="">-->
      <img src="http://bigplansfortheweekend.com/wp-content/uploads/2017/10/winds-of-change.png" alt="">
    </figure>
  </article>
  <div class="columns">
   <div class="column">
    <article class="article" href="#">
      <figure class="article-image is-16by9">
        <!--<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/image-01-lo.jpg" alt="">-->
        <img src="http://bigplansfortheweekend.com/wp-content/uploads/2017/10/https3A2F2Fcdn.evbuc_.com2Fimages2F366920122F2310469983842F12Foriginal.jpg" alt="">
      </figure>
      <div class="article-body">
        <h2 class="article-title">
          Jeremy Olander at City At Night
        </h2>
        <p class="article-content"> Friday Nov.17, Cityscape Sessions and City At Night proudly present:&nbsp; JEREMY OLANDER [Vivrant, Bedr</p>
      </div>
    </article>
  </div>
  <div class="column">
    <article class="article" href="#">
      <figure class="article-image is-16by9">
        <!--<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/image-01-lo.jpg" alt="">-->
        <img src="http://bigplansfortheweekend.com/wp-content/uploads/2017/10/https3A2F2Fcdn.evbuc_.com2Fimages2F361224882F1518810489042F12Foriginal.png" alt="">
      </figure>
      <div class="article-body">
        <h2 class="article-title">
          Walker &amp; Royce Self Help Tour at Sunday Sessions
        </h2>
        <p class="article-content"> Sunday Sessions – November 12, 2017 Dirtybird Presents: Walker &amp; Royce (Brooklyn, NY) </p>
      </div>
    </article>
  </div></div>
  <article class="article first-article" href="#">
    <figure class="article-image is-4by3">
      <h2>2017 Creative Futures Expo Presented by Applied Arts</h2>
      <!--<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/image-01-lo.jpg" alt="">-->
      <img src="http://bigplansfortheweekend.com/wp-content/uploads/2017/10/https-2F2Fcdn.evbuc_.com2Fimages2F345884992F1570794900392F12Foriginal.jpg" alt="">
    </figure>
  </article>
  <div class="columns">
   <div class="column">
    <article class="article" href="#">
      <figure class="article-image is-16by9">
        <!--<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/image-01-lo.jpg" alt="">-->
        <img src="http://bigplansfortheweekend.com/wp-content/uploads/2017/10/https3A2F2Fcdn.evbuc_.com2Fimages2F271412772F1762268901392F12Foriginal.png" alt="">
      </figure>
      <div class="article-body">
        <h2 class="article-title">
          SAVE the DATE – Mercury Lounge is turning 21 years old
        </h2>
        <p class="article-content"> Mercury Lounge is Turning 21 years old We will be celebrating this milestone throught the entire mon</p>
      </div>
    </article>
  </div>
  <div class="column">
    <article class="article" href="#">
      <figure class="article-image is-16by9">
        <!--<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/image-01-lo.jpg" alt="">-->
        <img src="http://bigplansfortheweekend.com/wp-content/uploads/2017/10/https3A2F2Fcdn.evbuc_.com2Fimages2F356429922F1454087557902F12Foriginal.png" alt="">
      </figure>
      <div class="article-body">
        <h2 class="article-title">
          Monkey Rock Music Halloween Party and Fundraiser
        </h2>
        <p class="article-content"> Monkey Rock Music is excited to present our annual Halloween Party and Fundraiser! As always, a port</p>
      </div>
    </article>
  </div></div></section>

  <section class="column">
    <div class="columns">
      <div class="column"><article class="article" href="#">
        <figure class="article-image is-16by9">
          <!--<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/image-01-lo.jpg" alt="">-->
          <img src="http://bigplansfortheweekend.com/wp-content/uploads/2017/10/https3A2F2Fcdn.evbuc_.com2Fimages2F362864052F2003438030152F12Foriginal.jpg" alt="">
        </figure>
        <div class="article-body">
          <h2 class="article-title  7 | 1">
            Deep Therapy : Halloween in a dfsdf  (Блок 1)
          </h2>
        <p class="article-content"> Ottawa’s biggest LGBTQ seasonal party is back for Halloween! GET YOUR TICKET EARLY & SAVE:www.sashay.eventbrite.caFri Oct. 27 | Barrymores | 10:30pmFeaturing DJ/Producer: DJ MARK FALCO (To  Ottawa’s biggest LGBTQ seasonal party is back for Halloween! GET YOUR TICKET EARLY & SAVE:www.sashay.eventbrite.caFri Oct. 27 | Barrymores | 10:30pmFeaturing DJ/Producer: DJ MARK FALCO (To</p>
        </div>
      </article><article class="article" href="#">
      <figure class="article-image is-16by9">
        <!--<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/image-01-lo.jpg" alt="">-->

        <img src="http://bigplansfortheweekend.com/wp-content/uploads/2017/10/https3A2F2Fcdn.evbuc_.com2Fimages2F344084352F1761370899072F12Foriginal.jpg" alt="">

      </figure>
      <div class="article-body">
        <h2 class="article-title  8 | 0">
          11th Annual Great Pumpkin Charity Ball (Блок 2)
        </h2>
        <p class="article-content"> 11th Annual Great Pumpkin Charity BallOttawa’s Biggest &amp; Best Annual Halloween eventSaturday, October 28, 2017St. Brigid’s Haunted Castle, 310 St. Patrick’s Street$40 tickets available at:M</p>
      </div>
    </article></div>
    <div class="column"><article class="article" href="#">
      <figure class="article-image is-16by9">
        <!--<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/image-01-lo.jpg" alt="">-->
        <!-- <img src="http://bigplansfortheweekend.com/wp-content/uploads/2017/10/https3A2F2Fcdn.evbuc_.com2Fimages2F362864052F2003438030152F12Foriginal.jpg" alt=""> -->
        <img src="http://bigplansfortheweekend.com/wp-content/uploads/2017/10/https3A2F2Fcdn.evbuc_.com2Fimages2F361056662F1613618451482F12Foriginal.png" alt="">
      </figure>
      <div class="article-body">
        <h2 class="article-title  7 | 1">
          Deep Therapy : Halloween in a Warehouse (Блок 3)
        </h2>
        <p class="article-content"> Ottawa’s biggest LGBTQ o вав вав вава</p>
      </div>
    </article><article class="article" href="#">
    <figure class="article-image is-16by9">
      <!--<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/image-01-lo.jpg" alt="">-->

      <!-- <img src="http://bigplansfortheweekend.com/wp-content/uploads/2017/10/https3A2F2Fcdn.evbuc_.com2Fimages2F344084352F1761370899072F12Foriginal.jpg" alt=""> -->
<img src="http://bigplansfortheweekend.com/wp-content/uploads/2015/10/ottawauppercanadavillagepumpkinpumpkinferno-1444928529c8pl4.jpg" alt="">
    </figure>
    <div class="article-body">
      <h2 class="article-title  8 | 0">
        11th Annual dfdfdf dfdf dfsdfsdf (Блок 4)
      </h2>
        <p class="article-content"> Ottawa’s biggest LGBTQ seasonal party is back for Halloween! GET YOUR TICKET EARLY & SAVE:www.sashay.eventbrite.caFri Oct. 27 | Barrymores | 10:30pmFeaturing DJ/Producer: DJ MARK FALCO (To </p>
    </div>
  </article></div>
</div>
</section>
</main>

2
  • 1
    блоки ужимаются до размера самого длинного слова. В ваших блоках есть длинные ссылки без пробелов. Испотзуйте word-break: break-word;
    – zhurof
    9 янв 2018 в 11:57
  • спасибо,ваш совет помог решить проблему
    – jetfire21
    14 фев 2018 в 20:09

1 ответ 1

1

Добавьте в медиа-запрос (min-width: 700px) flex-wrap: wrap, должно помочь

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.