отзывчивый разделитель между div в контейнере flex-строки

Question

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

Я пытался задать свойство max-width для каждого из классов responsive в приведенном ниже коде, но это не рендеринг,Я не могу дать фиксированную ширину inner-wrapper, потому что она зависит от ширины inner{#}.

<div class='main'>
  <div class='item-wrapper'>
    <div class='inner1'></div>
    <div class='responsive'></div>
  </div>
  <div class='item-wrapper'>
    <div class='inner2'></div>
    <div class='responsive'></div>
  </div>
  <div class='item-wrapper'>
    <div class='inner3'></div>
    <div class='responsive'></div>
  </div>
</div>

.main{
  width:100%;
  display:flex;
  height:40px;
  background:yellow;
}
.responsive{
  max-width:200px;
}

.item-wrapper{
  display:flex;
  height:100%;
  background:green;
}

, чтобы подвести итог, я ожидаю:

div1 -------------- div2 --------------- div3

такой, что только ширина '------'будет увеличиваться / уменьшаться, если я изменю размеры моего экрана

Answer 1

Вам нужно так много разметки

пример

.main {
  width: 100%;
  display: flex;
  height: 40px;
  background: yellow;
  justify-content: space-between;
  /* new */
}

.responsive {
  flex: 1;
  /* new */
  max-width: 200px;
  margin: auto;
  /* new */
  border-top: dotted;
  /* new */
}

.main>div:not([class]) {
  background: green;
  display: flex;
  align-items: center;
  /* new */
}

<div class='main'>
  <div>inner 1</div>
  <div class='responsive'></div>
  <div>inner 2</div>
  <div class='responsive'></div>
  <div>inner 3</div>
</div>

Если у вас есть только 3 элемента , то 2 псевдо могут стать разделителями по порядку:

.main {
  width: 100%;
  display: flex;
  height: 40px;
  background: yellow;
  justify-content: space-between;
}

.main::before,
.main::after {
  content: '';
  flex: 1;
  max-width: 200px;
  margin: auto;
  border-top: dotted;
}

.main>div:not([class]) {
  background: green;
  display: flex;
  align-items: center;
}

.main>div:first-child {
  order: -1
}

.main>div:last-child {
  order: 1
}

<div class='main'>
  <div>inner 1</div>
  <div>inner 2</div>
  <div>inner 3</div>
</div>

подробнее о flex: https://css -tricks.com / snippets / css / a-guide-to-flexbox /

Answer 2

Вы можете сделать это следующим образом, добавив правило в свой контейнер flexbox:

myContainer{
    //other properties
    justify-content:space-between;
}