Как разместить 2 блока, чтобы один был справа от другого и растягивался на всю оставшуюся ширину?

#html #css #вёрстка

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


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


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

Ответы

Ответ 1

.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;
}

  
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.
  
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.





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;
}


Ответ 2

Например:



* {
  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);
}

  
Left
  
Right





caniuse flexbox

caniuse calc


Ответ 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);
    }
}

		

		

	




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