Make div fill remaining *horizontal* space in flexbox

Question

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 unl

Answer 1

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.

Edit: Dotted bottom border will probably look weird depending on how your browser displays it. I'd personally recommend using a black circle SVG as a repeated background image, properly sized and positioned to the bottom of the middle container. Will add this alternative solution when I get time.

.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;
}

  
Left
  

  
Right With Text


  
Left With More Text
  

  
Right


  
Left With Text
  

  
Right With More Text