3

Вот чего нужно добиться:

  • Есть внешний блок <div>, его размеры зависят в процентах от размера окна.
  • Внутри него расположены еще 2 <div>. Первый из них имеет фиксированные размеры, а второй должен находиться справа от первого и растягиваться на всю оставшуюся ширину внешнего блока.
  • Кроме того, у второго внутреннего блока установлена еще и минимальная ширина.
  • Если ширина внешнего блока станет меньше, чем ширина первого внутреннего + минимальная ширина второго, тогда второй блок должен съезжать вниз и располагаться под первым.
  • Т.к. у первого блока ширина фиксированная и он один теперь не может заполнить всю линию от края до края, поэтому он должен стать по середине.

Т.е. второй внутренний блок должен переноситься вниз только когда достигнет предела и не сможет больше уменьшаться, до тех пор он должен быть справа от первого блока.

3 ответа 3

4

.parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.inner-left {
   width: 150px;
   
   outline: 1px solid #060;
}
.inner-right {
  flex-basis: 250px;
  flex-grow: 1;
  
  outline: 1px solid #900;
}
<div class="parent">
  <div class="inner-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident doloribus corporis minima delectus illum, quaerat iure cumque maxime ut, nihil recusandae asperiores tempora architecto! Minima magnam reiciendis nam voluptatum quia. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="inner-right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem dolores, fugit libero, quaerat officia cupiditate itaque natus dolor adipisci sit possimus neque fuga ea et, repellat tempora consequatur nostrum ut!  Doloribus consequuntur enim iure nesciunt quo aliquid. Repellendus sint praesentium, incidunt fugiat doloremque aperiam ullam ad, possimus animi asperiores provident quasi iste. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam ipsam voluptatem architecto corporis exercitationem, velit veritatis ab dolorem vitae nihil eaque iusto labore dolore deleniti nesciunt possimus vero amet consectetur.</div>
</div>

flex-basis: 250px; тут играет роль минимальной ширины, описанной вами в третьем пункте

P.S. Пардон, забыл сразу вендорные префиксы дописать:

.parent {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.inner-left {
   width: 150px;

   outline: 1px solid #060;
}
.inner-right {
  -ms-flex-preferred-size: 250px;
      flex-basis: 250px;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;

  outline: 1px solid #900;
}
1
  • Спасибо большое. Такое решение похоже то что надо. Завтра еще разберусь досконально как работает этот вариант и варианты из других ответов и, если возникнут какие мелкие вопросы, думаю уже сам разберусь и доработаю все как мне надо. Вопрос можно считать закрытым.
    – SoulDrake
    17 янв 2019 в 18:19
4

Например:

* {
  box-sizing:border-box;
}

html,
body {
  padding: 0;
  margin: 0;
}

.wrap {
  display: flex;
  flex-flow: row wrap;
  
}

.left {
  width: 50px;
  flex-grow: 0;
  flex-shrink: 0;
  background: #888;
}

.right {
  min-width: 100px;
  background: #ccc;
  width: calc(100% - 50px);
}
<div class="wrap">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

caniuse flexbox

caniuse calc

1
  • Я что-то подобное уже пробовал, не совсем то. Нужно, чтобы после смещения вниз у второго блока ширина не становилась фиксированная, внизу он тоже должен быть растянут по максимуму. А верхний блок должен стать по середине, а не оставаться приклеенным к левому краю. Но все равно спасибо.
    – SoulDrake
    17 янв 2019 в 17:27
3

.wrapper {
    display: grid;
    grid-template-columns: 100px auto;
    border: 1px green solid;
    min-width: 300px;
}

.const , .flex {
    display: inline-block;
    height: 80px;
    margin: 15px;
    box-sizing: border-box;
}
.const {

    width: 80px;

    border: 1px red solid;

}

.flex {
    min-width: 160px;
    border: 1px blue solid;
}

@media screen and (max-width: 310px) {
    .wrapper {
        grid-template-columns: auto;
        justify-items: center;
        min-width: auto;
    }
    .flex {
        min-width: calc(100% - 30px);
    }
}
<div class="wrapper">
		<div class="const"></div>
		<div class="flex"></div>
	</div>

решение на grid-ах

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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