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:
the right one is always the same; you on the left - you get everything that's left
.ar-course-nav {
cursor: pointer;
padding: 8px 12px 8px 12px;
border-radius: 8px;
}
.ar-course-nav:hover {
background-color: rgba(0, 0, 0, 0.1);
}
grid-template-rows/columns
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.
You wrote:
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:
What are the differences between flex-basis and width?
Learn more about flex alignment along the main axis here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
Learn more about flex alignment along the cross axis here:
How does flex-wrap work with align-self, align-items and align-content?
Basically I was trying to get my code to have a middle section on a 'row' to auto-adjust to the content on both sides (in my case, a dotted line separator). Like @Michael_B suggested, the key is using display:flex on the row container and at least making sure your middle container on the row has a flex-grow value of at least 1 higher than the outer containers (if outer containers don't have any flex-grow properties applied, middle container only needs 1 for flex-grow).
Here's a pic of what I was trying to do and sample code for how I solved it.
https://i.stack.imgur.com/YgZW5.png
.row { background: lightgray; height: 30px; width: 100%; display: flex; align-items:flex-end; margin-top:5px; } .left { background:lightblue; } .separator{ flex-grow:1; border-bottom:dotted 2px black; } .right { background:coral; }
Follow WeChat
Success story sharing
Want to stay one step ahead of the latest teleworks?
Subscribe Now相似问题
- Make a div fill the height of the remaining screen space
- How do I retrieve an HTML element's actual width and height?
- How can I position my div at the bottom of its container?
- Expand a div to fill the remaining width
- How to make a div 100% height of the browser window
- How to make an inline-block element fill the remainder of the line?
- Make body have 100% of the browser height
- Fixed width div on left, fill remaining width div on right
- Font scaling based on width of container
- How can I make Bootstrap columns all the same height?
flex-grow: 1was not having the same effects thanflex: 1. Do you maybe know why is it different? (I fixed my problem with the latter, thx)flex-grow: 1, theflex-basisproperty remains atauto, its default value. Withflex: 1, theflex-basisproperty changes to0. See my answer here for an in-depth review: stackoverflow.com/q/43520932/3597276 @WhGandalfmin-width: 0(ormin-height:0is flex direction column), or else it will overflow beyond the available space in the layout, which is super weird honestly. stackoverflow.com/a/66689926/454780