Динамическая ширина столбца в макете Flex

Question

Я пытаюсь создать сетку из трех столбцов и хочу, чтобы она была адаптивной с помощью Flex.Используя CSS, как показано в ссылке на скрипку ниже, я могу получить довольно адаптивный макет.Проблема в том, что второй столбец (синий) не уменьшается в размере при изменении размера, а вместо этого происходит удаление желтого столбца.См., Например, следующий gif: Пример видео

Как можно уменьшить размер синей рамки при изменении ее размера, чтобы желтая рамка не исчезла?

ЭтоCSS, который я использую:

.container-main {
    margin: 50px;   
}

.box-container {
  display:flex;
  //align-items: flex-start;
  background-color: #cccccc;


  align-content: stretch;  

}

.box-tick-code {
    background-color: red;
    flex-basis: 100%;
    height: 40px;
flex-flow: row nowrap;
    flex-shrink: 2;
    min-width: 0px;
    min-height: 0px;
    overflow: hidden;   
}

.box-tick-title {
    background-color:blue;
    display:flex;
    flex-basis: 100%;
    height: 40px;
    flex-shrink: 1;
    min-width: 0px;
    min-height: 0px;
    overflow: hidden;   

}

.long-title {


  overflow:hidden;
  display:inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.box-more-info {
    background-color:yellow;
    flex-basis: 100%;
    height: 40px;
    flex-shrink: 2;
        min-width: 0px;
    min-height: 0px;
    overflow: hidden;
}

Вот ссылка скрипта на HTML / CSS:

Ссылка на CSS CSS в скрипте

Answer 1

Это происходит при удалении или отсутствии просмотра метатега порта на html-странице или в файле.добавьте это в html head section

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Я думаю, вам не нужно устанавливать (минимальная высота) и (минимальная ширина) в (0), если вы еще не указали другое значение.

вот фрагменты кода работают:

 .container-main {
    margin: 50px;   
}

.box-container {
  display:flex;
  //align-items: flex-start;
  background-color: #cccccc;


  align-content: stretch;  

}

.box-tick-code {
    background-color: red;
    flex-basis: 100%;
    height: 40px;
flex-flow: row nowrap;
    flex-shrink: 2;
    overflow: hidden;   
}

.box-tick-title {
    background-color:blue;
    display:flex;
    flex-basis: 100%;
    height: 40px;
    flex-shrink: 1;
    min-width: 0px;
    min-height: 0px;
    overflow: hidden;   

}

.long-title {
  overflow:hidden;
  display:inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.box-more-info {
    background-color:yellow;
    flex-basis: 100%;
    height: 40px;
    flex-shrink: 2;
    min-width: 0px;
    min-height: 0px;
    overflow: hidden;
}

<div class="container-main">
                <div class="box-container">
                  <div class="box-tick-code">
                    <div class="long-title">title</div>
                  </div>
                  <div class="box-tick-title">
                    <div class="long-title">imagine if there is some title here</div>
                  </div>
                  <div class="box-more-info">
                    <div class="long-title">title</div>
                  </div>
                </div>
              </div>

Мой ответ основан на приведенном вами примере Gif