#css #flexbox
#css #flexbox
Вопрос:
Почему сгибание перестает работать, когда я меняю направление сгибания родительского контейнера в своем коде?
В следующем примере у меня есть два divs, родительский div с гибким контейнером и единственный дочерний элемент с гибким элементом с зеленым фоном, и, как вы можете видеть, flex-grow работает просто отлично
.flex-parent{
display:inline-flex;
flex-direction:row;
}
.flex-child{
overflow:hidden;
background:#99bb99;
flex-basis:0px;
flex-grow:1;
} <div class="flex-parent">
<div class="flex-child">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
</div> Однако, если я изменю направление сгибания родительского контейнера на столбец, сгибание перестает работать, и мой контейнер перестает отображаться, как вы можете видеть далее
.flex-parent{
display:inline-flex;
flex-direction:column;
}
.flex-child{
overflow:hidden;
background:#99bb99;
flex-basis:0px;
flex-grow:1;
} <div class="flex-parent">
<div class="flex-child">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
</div> Кто-нибудь может сказать мне, почему это происходит? Мне нужно сохранить overflow:hidden, чтобы иметь возможность свернуть контейнер, изменив значение flex-grow на 0, поэтому, хотя удаление свойства overflow приведет к отображению контейнера, избавление от него противоречит цели, и все работает нормально, когда для flex-direction установлено значение row независимо, поэтому я не понимаю, почему это не работает только для изменения значения на столбец
Комментарии:
1. его из-за гибкой основы дает ему li 20 или 25 пикселей
2. Если это причина, почему это работает, когда для flex-direction установлено значение row, когда в этом случае я также присвоил ему flex-basis:0px? В любом случае, я на самом деле не пытаюсь заставить его расширяться до произвольно выбранной высоты, я пытаюсь заставить его расширяться до высоты, определяемой содержимым (точно так же, как в случае flex-direction:row он расширяется до ширины, определяемой содержимым)
3. в обоих случаях это не должно работать, поэтому реальный вопрос заключается в том, почему это работает в первом случае. Второй кажется мне логичным результатом
4. Черт возьми, я предположил, что это сработало в первом, потому что наличие flex-basis: 0 и flex-grow: 0 заставляло дочерний элемент рассматриваться как имеющий (на практике) без гибких измерений (так сказать, в некотором роде), в результате чего содержимое обрабатывалось как какое-топереполнения, но это был именно тот способ, которым я обернул свой разум вокруг него, чтобы он имел какой-то интуитивный смысл
Ответ №1:
Проблема в том overflow:hidden; , что . Это связано с тем, что Flex переносится только тогда, когда начальный основной размер элементов flex переполняет контейнер flex. Итак, для суммирования.
направление сгибания: строка Это когда элементы сгибания шире контейнера.
flex-direction: столбец, который они должны превышать высоту контейнера.
В качестве решения попробуйте установить a height или a min-height для родительского элемента. Надеюсь, это решит вашу проблему.
.flex-parent{
min-height: 20px;
}
Комментарии:
1. Но я не пытаюсь переполнить гибкий контейнер, на самом деле контейнер не имеет заданных размеров, поэтому он может свободно расширяться. Установка overflow:hidden для дочернего элемента flex сворачивает элемент flex, если он также имеет flex-grow:0 и flex-basis: 0px, и после этого я могу отменить его сворачивание, установив flex-grow:1, который увеличивает его до размера содержимого (здесь родительский контейнер также расширяется). Или, ну, это работает таким образом, когда для flex-direction установлено значение row, но не тогда, когда для него установлено значение column, я хочу знать, почему установка flex-grow в 1 не приведет к расширению свернутого элемента до размера содержимого в этом случае