0

возникла проблема, div занимает всю ширину ( 6 класс ) предоставленную родительским div, а мне нужна ширина по контенту

.wrapper1 {
  display: flex;
  flex-direction: column;
  min-width: 300px;
}

.wrapper2 {
  display: flex;
  flex-direction: column;
  width: 170px;
}

header {
  display: flex;
  justify-content: space-between;
  margin: 50px;
}

.button {
  border-radius: 5px;
  background-color: #644499;
  text-align: center;
  width: 170px;
  height: 40px;
  line-height: 40px;
  font-size: 15px;
  color: #fff;
}

.graybutton {
  border-radius: 5px;
  background-color: #c4c4c4;
  text-align: center;
  width: 170px;
  height: 40px;
  line-height: 40px;
  font-size: 15px;
  color: #fff;
}

.smallicon {
  border-radius: 5px;
  background-color: #c4c4c4;
  text-align: center;
  line-height: 100%;
  font-size: 15px;
  color: #fff;
  padding: 5px 10px;
  width: auto;
  display: inline-flex;
}

.info {
  height: 20px;
  line-height: 20px;
  font-size: 20px;
  text-align: left;
  font-weight: 300;
}
<header>
  <div class="wrapper1">
    <div class="info" style="margin: 0px 0px 20px 0px">Неизвестная ширина</div>
    <div class="smallicon">Неизвестная ширина</div>
  </div>
  <div class="wrapper2">
    <div class="graybutton" style="margin: 0px 0px 20px 0px">
      Выход
    </div>
    <div class="button" style="margin: 0px 0px 20px 0px">
      Изменить EMail
    </div>
    <div class="button">
      Изменить пароль
    </div>
  </div>
</header>

ошибка

3
  • я не понимаю что значит ширина по контенту. Для меня ширина по контенту это ширина родительского контейнера 7 фев 2021 в 13:11
  • У вас .wrapper1 занимает 300px, вы для него написали min-width: 300px, что не так? 7 фев 2021 в 13:15
  • Там, где у меня написано "6 класс". Мне нужно чтобы прямоугольник в котором содержится эта запись увеличивался, зависимо от ширины самой записи, а у меня он шире необходимого: расползается на всю ширину большего wrapper1 7 фев 2021 в 13:18

1 ответ 1

2

Добавьте классу .wrapper1 свойство {align-items:flex-start;}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.