элемент flexbox 100% оставшейся ширины

Question

Я хочу добиться следующего сценария с помощью flexbox

зеленый элемент является текстовым элементом, а ширина является гибкой.Синие элементы должны иметь 100% оставшейся ширины рядом с зеленым элементом.

Мое текущее решение выглядит так:

<div class="container">
  <span class="title">title</span>
  <div class="fullwidth"></div>
  <div class="fullwidth"></div>
  <div class="fullwidth"></div>
</div>

и css:

.container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  background-color: #EAEBEF;

  .title {
    padding: 20px;
    background-color: #48CFAE;
  }

  .fullwidth {
    background-color: #87BDFF;
    flex: 0 0 100%;
    height: 60px;
    margin: 10px 0;
  }
}

Но в настоящее время это выглядит так: вот пример codepen

Answer 1

Без изменения HTML это можно сделать с помощью CSS-Grid в качестве альтернативы flexbox.

.container {
  display: grid;
  grid-template-columns: max-content 1fr;
  grid-gap: 1em;
  background-color: #EAEBEF;
  margin-bottom: 1em;
}

.title {
  padding: 10px;
  grid-row: 2;
  background-color: #48CFAE;
}

.fullwidth {
  grid-column: 2;
  background-color: #87BDFF;
  height: 40px;
}

<div class="container">
  <div class="title">title</div>
  <div class="fullwidth"></div>
  <div class="fullwidth"></div>
  <div class="fullwidth"></div>
</div>

<div class="container">
  <div class="title">Longer title</div>
  <div class="fullwidth"></div>
  <div class="fullwidth"></div>
  <div class="fullwidth"></div>
</div>

Answer 2

См. Код ниже:
Вы должны деформировать fullwidth в div и установить width на это div
, также установить width и margin наtitle

.container {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	background-color: #EAEBEF;
}	
	.title {
		width: 20%;
		padding: 20px;
		background-color: #48CFAE;
        margin-left: 15px;

	}
	
	.fullwidth {
		background-color: #87BDFF;
		flex: 0 0 100%;
		height: 60px;
		margin: 10px 0;
	}
	.a{
		    margin: 50px;
		    width: 50%;
	}

<div class="container">
	<span class="title">title</span>
	<div class="a">
	<div class="fullwidth"></div>
	<div class="fullwidth"></div>
	<div class="fullwidth"></div>
	</div>
</div>

Answer 3

Если вы хотите добиться этого без изменения html, но только с меньшими затратами, попробуйте это:

.container {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    background-color: #EAEBEF;
    justify-content: flex-end;
    .title {
          padding: 20px;
          background-color: #48CFAE;
          margin-right: 20px;
          flex-grow: 1
    }
    .fullwidth {
          background-color: #87BDFF;
          height: 60px;
          margin: 10px 0;
          width: 80%;
    }
}

ваш отредактированный кодовый код

Answer 4

Попробуйте эту разметку HTML и CSS.По сути, вам нужно держать левую сторону в одном делении, а правые элементы - в другом.

 
   .container {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  background-color: #eaebef;
}
.container .title {
  padding: 20px;
  background-color: #48cfae;
}
.container .div1 {
  width: 20%;
}
.container .div2 {
  width: 80%;
}
.container .fullwidth {
  background-color: #87bdff;
  height: 60px;
  margin: 10px 0;
}

<div class="container">
<div class="div1">
	<span class="title">title</span>
</div>
<div class="div2">
	<div class="fullwidth"></div>
	<div class="fullwidth"></div>
	<div class="fullwidth"></div>
</div>
</div>