Fill the remaining height or width in a flex container
I have 2 divs side-by-side in a flexbox. The right hand one should always be the same width, and I want the left hand one to just grab the remaining space. But it won’t unless I specifically set its width. So at the moment, it’s set to 96% which looks OK until you really squash the screen — then the right hand div gets a bit starved of the space it needs. I guess I could leave it as it is but it feels wrong — like there has to be a way to say:
.ar-course-nav < cursor: pointer; padding: 8px 12px 8px 12px; border-radius: 8px; >.ar-course-nav:hover
Created: 21 September 2016 > 4 Answers 4
Use the flex-grow property to make a flex item consume free space on the main axis.
This property will expand the item as much as possible, adjusting the length to dynamic environments, such as screen re-sizing or the addition / removal of other items.
A common example is flex-grow: 1 or, using the shorthand property, flex: 1 .
Hence, instead of width: 96% on your div, use flex: 1 .
So at the moment, it’s set to 96% which looks OK until you really squash the screen — then the right hand div gets a bit starved of the space it needs.
The squashing of the fixed-width div is related to another flex property: flex-shrink
By default, flex items are set to flex-shrink: 1 which enables them to shrink in order to prevent overflow of the container.
To disable this feature use flex-shrink: 0 .
For more details see The flex-shrink factor section in the answer here:
Learn more about flex alignment along the main axis here:
Learn more about flex alignment along the cross axis here:
Как сделать оставшиеся блоки флекс по всю ширину?
Есть два блока флекс в строку: Для первого задана ширина: flex-basis: 100px. Как оставшийся блок и строке растянуть в оставшееся пространство?
|_____100px_____|_____________________________|_____________________________| 3 ответа 3
Вот как одно из решений. Подробно про flex-grow можете почитать тут https://developer.mozilla.org/ru/docs/Web/CSS/flex-grow
.flex < display: flex; >.item-100px < flex-grow: 0; flex-basis: 100px; height: 30px; >.item < flex-grow: 1; height: 30px; >.color1 < background-color: yellow; >.color2 < background-color: blue; >.color3
1 2 3 Flex-basis устанавливает базовый размер элемента, но при использовании других flex свойств этот размер может изменяться. Именно поэтому я указал max-width: 100px; для первого элемента, кроме flex-basis: 100px . Для того, чтобы остальные элементы занимали оставшуюся ширину, я указал flex: 1 для всех flex -элементов
Похожие
Подписаться на ленту
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.7.27.43548
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Flexbox: how to get divs to fill up 100% of the container width without wrapping?
I’m in the process of updating an old inline-block -based grid model I have to a newer Flexbox one I created. Everything has worked fine, apart from one little snag, which has become a bit of a dealbreaker: I have a bunch of CSS-controlled sliders; so there’s a containing wrapper with 100% width, and inside is another div: its width is also 100%, but its white-space is set to nowrap . Using inline-block , this meant that the internal divs (which were also set to 100% width) wouldn’t be bound by their parents’ constraints and wrap onto the next line — they’d just carry on flowing out of the box. This is exactly what I wanted. However, I cannot get this to work at all with flexbox. For reference, here’s an image: And for reference, here’s a jsFiddle of the thing working with inline-block: http://jsfiddle.net/5zzvqx4b/ . and not working with Flexbox: http://jsfiddle.net/5zzvqx4b/1/ I’ve tried all kinds of variations with flex , flex-basis , flex-wrap , flex-grow , etc. but for the life of me I can’t get this to work. Note that I can force it to do what I want in a hacky, inflexible way by setting the .boxcontainer width to 200% . That works for this single example, but in some cases I won’t know beforehand how many child boxes there will be, and I’d rather not resort to inline styling on each element if possible.
. not an answer, but why do you want to change flex, you have a working code already which is prefix free, and will work on more browsers?
@sdcr: Because of the other requirements of the project which, at ~20,000 lines of code, would probably take a little while to go into.
oh, ok just to say that some of the flex properties you set there aren’t even necessary, such as flex-direction: row; , justify-content: flex-start; , align-items: flex-start; those are default rules, unless you’re overwriting them. there is a great guide here.
@sdcr: Thanks — it is indeed very verbose in that example, but only because I copy-n-pasted it directly from my stylesheet, in which there are a lot of conditions and subclasses, etc. which is why the properties are set explicitly. I don’t know flexbox well enough to write it off the top of my head yet!
Great question! Been wondering about this forever myself. Never knew how the flex-shrink property worked.