Дайте содержимому гибкой строки 100% -ную высоту контейнера
У меня есть контейнер flexbox с разметкой строк с тремя контейнерами. Контейнер справа имеет основное содержимое, и я хочу, чтобы левый контейнер увеличивался в высоту, чтобы соответствовать.
Если я устанавливаю align-items контейнера на stretch, он делает то, что я хочу. Однако я не могу использовать stretch по независящим от меня обстоятельствам.
Единственные реальные варианты, которые у меня есть, - это center и flex-start. Однако процентные высоты для .left и .mid, похоже, полностью игнорируются этими настройками align-items.
Есть ли способ заставить левый контейнер расти с высотой родителя, кроме переключения на align-items: stretch?
.container {
align-items: flex-start;
display: flex;
flex-direction: row;
border: 1px solid black;
}
.left {
width: 34%;
border: 1px solid red;
display: flex;
flex-direction: column;
align-items:center;
justify-content:center;
}
.mid {
width: 3%;
height: 100%;
border: 1px solid green;
}
.right {
border: 1px solid blue;
}<div class = "container">
<div class = "left">
<div>Hello World!</div>
</div>
<div class = "mid"></div>
<div class = "right">
<div>Right content</div>
<div>Right content</div>
<div>Right content</div>
<div>Right content</div>
<div>Right content</div>
<div>Right content</div>
<div>Right content</div>
<div>Right content</div>
</div>
</div>Можно ли использовать растяжку для выравнивания себя?
Вы можете попробовать удалить свойство align-items: flex-start; из .container или добавить свойство align-items: normal; в .container, если оно соответствует вашим требованиям.
удаление align-items заставляет его использовать stretch / normal, чего я не могу сделать (по очень сложным причинам) :(
Причина, по которой я ограничен, заключается в том, что эти CSS и DOM являются результатом разрабатываемой пользовательской системы шаблонов. Я застрял с опциями, которые дает мне система шаблонов, которые сейчас являются только этими двумя вариантами выравнивания. Я подозреваю, что мне нужно добавить stretch в качестве опции выравнивания в эту систему, но если есть способ заставить ее работать без этого, это будет намного проще.
Вы пробовали решение в stackoverflow.com/questions/23090136/…
И есть ли у вас возможность использовать здесь, в этой системе шаблонов, JavaScript? Но да, в конечном итоге вы должны убедиться, что тот, кто создает эту систему шаблонов, поддерживает весь данный модуль CSS, а не только его части.
Как уже упоминалось, .left {align-self: stretch} - это то, что вам нужно.
Javascript генерирует DOM из шаблона, так что да. Но мы стараемся избегать использования JS для создания макета (мы делаем это для еще одной функции, и это больно). align-self - это не то, что мы можем установить через систему прямо сейчас. Похоже, нам просто нужно добавить параметр выравнивания STRETCH в нашу систему шаблонов, чего я и ожидал, но надеялся, что может быть более простой способ.
без растяжки у вас есть общая проблема:% чего?