Предотвращение разрыва и сбрасывания

Question

Как можно изменить размер окна в следующем примере, можно ли отключить и отключить .small, а оба его и .big остались там, где они есть?

Я планирую использовать медиа-запросы, чтобы изменить макет для меньших экранов, но прямо сейчас .small обрывается до достижения разрешения для медиа-запросов, что делает работу пользователя менее приятной.

http://jsfiddle.net/7q9jbuns/

.main { 
 
    display: table; 
 
    border: 1px solid black; 
 
} 
 
.big { 
 
    float: left; 
 
} 
 
.small { 
 
    float: right; 
 
}

<div class="wrapper"> 
 
    <div class="main"> 
 
     <p>Using display table so the box will wrap to this text</p> 
 
     <p>Ref. <a href="http://stackoverflow.com/questions/27190514/making-divs-inside-flex-boxes-shrink-wrap">StackOverflow #27190514</a></p> 
 
     <div class="big"> 
 
      <img src="http://placehold.it/200/200" /> 
 
     </div> 
 
     <div class="small"> 
 
      <img src="http://placehold.it/50/50" /> 
 
     </div> 
 
    </div> 
 
</div>

Answer 1

Использование CSS макет таблицы. Оберните два divs в контейнер.

JsFiddle Demo

.main { 
 
    display: inline-block; 
 
    border: 1px solid black; 
 
} 
 
.images { 
 
    display: table; 
 
    width: 100%; 
 
} 
 
.big, .small { 
 
    display: table-cell; 
 
    vertical-align: top; 
 
} 
 
.small { 
 
    text-align: right; 
 
}

<div class="wrapper"> 
 
    <div class="main"> 
 
     <p>Using display table so the box will wrap to this text</p> 
 
     <p>Ref. <a href="http://stackoverflow.com/questions/27190514/making-divs-inside-flex-boxes-shrink-wrap">StackOverflow #27190514</a></p> 
 
     <div class="images"> 
 
      <div class="big"> 
 
       <img src="http://placehold.it/200/200" /> 
 
      </div> 
 
      <div class="small"> 
 
       <img src="http://placehold.it/50/50" /> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Использование CSS Flexbox. Снова, требуется добавить контейнер.

JsFiddle Demo

.main { 
 
    display: inline-block; 
 
    border: 1px solid black; 
 
} 
 
.images { 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-flex-direction: columns; 
 
    -ms-flex-direction: columns; 
 
    flex-direction: columns; 
 
} 
 
.big { 
 
    -webkit-flex: 1; 
 
    -ms-flex: 1; 
 
    flex: 1; 
 
}

<div class="wrapper"> 
 
    <div class="main"> 
 
     <p>Using display table so the box will wrap to this text</p> 
 
     <p>Ref. <a href="http://stackoverflow.com/questions/27190514/making-divs-inside-flex-boxes-shrink-wrap">StackOverflow #27190514</a></p> 
 
     <div class="images"> 
 
      <div class="big"> 
 
       <img src="http://placehold.it/200/200" /> 
 
      </div> 
 
      <div class="small"> 
 
       <img src="http://placehold.it/50/50" /> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

Это то, что вы ищете?

white-space: nowrap; 
/* (overflow: hidden;) */ 

Answer 3

Одним из решений является добавление min-width к вашему .main, с шириной требуется, чтобы сохранить его от упаковки.

http://jsfiddle.net/xqg3r8f3/