Corey Ogburn Corey Ogburn - 1 year ago 74
HTML Question

Two divs side by side, the right one's width decided by its content, the left one takes up all available space?

In the right div I have an image and a link. The images that might load have a huge variety of aspect ratios (from 0.38 to 6.83) and I have no control over the source images but they need to have the proper aspect ratio. To do that, I've given it a

but all too often the image is thinner than that width.

I'm trying to get the first div (
) to take up all left over space in the parent that the second div (
) doesn't use. If the image doesn't take up the entire space allowed by
, I'd like the left container not leave that as white space.

I've messed with floating the second div right but if the first div's content gets too wide it won't break into a new line, it'll just push the second div down.


<div class="owner-address col-xs-12">
<div class="owner-info-container">
<span class="owner-info">
<span class="header">Owner Name</span><br/>
<span>Name goes here</span>
<div class="primary-image-container">
<img />
<a>Send us an updated photo</a>

Answer Source

You can accomplish this using flexbox.

If you assign display: flex; to your .owner-address class, and then give your .owner-info-container a flex-grow: 1;, it will take up the remaining space within the .owner-address.


.owner-address {
  display: flex;

.owner-info-container {
  flex-grow: 1;


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download