Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.06.2019, 16:33
Профессор
Отправить личное сообщение для Shitbox2 Посмотреть профиль Найти все сообщения от Shitbox2
 
Регистрация: 04.10.2010
Сообщений: 571

Блок по фактиеской ширине контейнера во FLEX
Пример: https://stackblitz.com/edit/typescript-zxu2kk

Как сделать, чтобы блок content был бы равен фактической ширине блока header, а не ширине окна?
Ответить с цитированием
  #2 (permalink)  
Старый 13.07.2019, 14:55
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

В стилях у содержимого (селектор .content) и заголовка (селектор .header) уберите объявление ширины элементов. Также, возможно, вы захотите добавить объявление контейнеру (селектор .container, объявление width: min-content;), отвечающее за то, чтобы его ширина была не больше самого широкого элемента!

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: auto;
  width: min-content;
}

.header {
  border: solid 1px red;
}

.content {
  border: solid 1px green;
}
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
при скроллинге блок исчезает avanesov89 Общие вопросы Javascript 0 19.03.2016 13:26
Ховер и появляющий блок Shuryga Элементы интерфейса 3 28.09.2015 14:39
Переместить блок в начало контейнера lukasss Элементы интерфейса 4 21.10.2014 14:13
Копирование блоков в блок maximus Events/DOM/Window 1 14.09.2013 19:40
Не сохраняются настройки grid Fubu_By ExtJS 1 09.07.2013 21:49