CSS - ширина внутреннего div во flex-контейнере при изменении ширины контейнера

Question

CSS - ширина внутреннего div во flex-контейнере при изменении ширины контейнера

Рейтинг: 0Ответов: 1Опубликовано: 30.07.2023

Как мне добиться правильного поведения элемента? Использование flex не обязательно, это может быть grid или любой другой HTML код, дающий тот же результат.

В коде есть элемент примерно такого вида:

Контейнер может уменьшаться, в этом случае элемент должен приобретать следующий вид:

а не такой: , как получилось у меня.

Вот пример кода:

<head>
<style>
.container{padding: 0 10px 0 10px;display:flex;align-items: center;height:50px;border: 1px solid #B6CBCF;overflow:hidden;}
.containerWidth{width:170px;}
.myText{width: fit-content;border-right: 1px solid #B6CBCF;}
.myIcon{width:36px;}
.iconImitation{width: 16px;height:16px;background-color:red;
border-radius: 50%;margin-left: 10px;}
</style>
</head>
<body>
  <div class="container containerWidth">
    <div class="myText">twoWordsContain Text</div>
    <div class="myIcon"><div class="iconImitation"></div></div>
  </div>
</body>

Для тестирования можно менять в стиле .containerWidth: width:170px и width:220px. В первом случае текст будет двустрочным, во втором - однострочным. Размеры даны для примера, в реальном коде я не знаю их заранее.

Если в стиле .myTextзаменить fit-content на min-content, то в коротком варианте элементы расположатся правильно. Но в длинном текст будет оставаться двустрочным, этого не должно происходить.

UPDATE: Судя по аналогичному кейсу на английском stackoverflow, эта задача вообще не решается без JS. Все-таки оставлю вопрос пока открытым, там ответы семилетней давности, с тех пор могло появиться решение.

css flexbox responsive

Источник: Stack Overflow на русском

Answer 1

▲ 0

.container {
  display: flex;
  padding: 0 10px 0 10px;
  align-items: center;
  height: 50px;
  width: 170px;
  border: 1px solid black;
}

.myText {
  display: inline-block;
  border-right: 1px solid black;
  word-break: break-all;
}

.myIcon {
  width: 36px;
}

.iconImitation {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: red;
  margin-left: 10px;
}

.container2 {
  display: flex;
  padding: 0 10px 0 10px;
  align-items: center;
  height: 50px;
  width: 220px;
  border: 1px solid black;
}

.myText2 {
  display: inline-block;
  border-right: 1px solid black;
  word-break: break-all;
}

.myIcon2 {
  width: 36px;
}

.iconImitation2 {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: red;
  margin-left: 10px;
}

.container3 {
  display: flex;
  padding: 0 10px 0 10px;
  align-items: center;
  height: 50px;
  width: 500px;
  border: 1px solid black;
}

.myText3 {
  display: inline-block;
  border-right: 1px solid black;
  word-break: break-all;
}

.myIcon3 {
  width: 36px;
}

.iconImitation3 {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: red;
  margin-left: 10px;
}

.container4 {
  display: flex;
  padding: 0 10px 0 10px;
  align-items: center;
  height: 50px;
  width: 100px;
  border: 1px solid black;
}

.myText4 {
  display: inline-block;
  border-right: 1px solid black;
  word-break: break-all;
}

.myIcon4 {
  width: 36px;
}

.iconImitation4 {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: red;
  margin-left: 10px;
}

.container5 {
  display: flex;
  padding: 0 10px 0 10px;
  align-items: center;
  height: 50px;
  width: 110px;
  border: 1px solid black;
}

.myText5 {
  display: inline-block;
  border-right: 1px solid black;
  word-break: break-all;
}

.myIcon5 {
  width: 36px;
}

.iconImitation5 {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: red;
  margin-left: 10px;
}

<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="utf-8">
  <title>flex</title>
</head>

<body>
  <div class="container">
    <div class="myText">two Words Contain Text</div>
    <div class="myIcon">
      <div class="iconImitation"></div>
    </div>
  </div>
  <br>
  <br>
  <div class="container2">
    <div class="myText2">two Words Contain Text</div>
    <div class="myIcon2">
      <div class="iconImitation2"></div>
    </div>
  </div>
  <br>
  <br>
  <div class="container3">
    <div class="myText3">two Words Contain Text</div>
    <div class="myIcon3">
      <div class="iconImitation3"></div>
    </div>
  </div>
  <br>
  <br>
  <div class="container4">
    <div class="myText4">two Words Contain Text</div>
    <div class="myIcon4">
      <div class="iconImitation4"></div>
    </div>
  </div>
  <br>
  <br>
  <div class="container5">
    <div class="myText5">two Words Contain Text</div>
    <div class="myIcon5">
      <div class="iconImitation5"></div>
    </div>
  </div>
</body>

</html>

Может быть не 100% идеальные примеры, но все же...Что нужно? 1. При изменении ширины контейнера текст в текстовом блоке располагается в одну либо в несколько строк. 2. Блок с текстом должен заканчивается по правому краю без отступа. 3. Блок с кругом должен располагаться на одинаковом расстоянии от блока с текстом вне зависимости от ширины блока с текстом. Что имеем? 1. При изменении ширины контейнера текст в текстовом блоке располагается в одну строку при большей ширине контейнера, в несколько строк при меньшей ширине контейнера. 2. Блок с текстом заканчивается по правому краю без отступа. (согласна... с 4 примером небольшой косяк). 3. Блок с кругом во всех примерах находится на одинаковом расстоянии от блока с текстом (с отступом 10px слева)

CSS - ширина внутреннего div во flex-контейнере при изменении ширины контейнера

Ответы