CODEWITHSUNDEEP
cssflexboxcss-grid
ivanjonas
ivanjonas

Reputation: 609

Make an element take up available horizontal space without causing its parent to widen

I have a flexbox container with exactly two children, both of which can have variable content. I want the width of the entire container to fit the width of the first child, but I want the second child's contents to wrap and not cause the container to grow horizontally. See the runnable snippet below for a visual problem description.

Currently looking for a CSS Grid solution. I have found one partial solution, but relies on JavaScript: Make the second child a relative container, put its contents in an intermediate absolutely-positioned container, and use JS to set a fixed height. At least it's good for showing what I'm looking for.

Problem:

.container {
  display: inline-flex;
  flex-direction: column;
  border: 1px solid red;
}

.child {
  background-color: wheat;
  margin: 5px;
}
<div class="container">
  <div class="first child">
    This content can grow and be as wide as it wants
  </div>
  <div class="second child">
    This content will also be any size it wants, but I * want it to wrap at the asterisk in this sentence, which is where the first child above would naturally end. This will be its own flexbox container holding several buttons that should wrap onto new rows.
  </div>
</div>

JavaScript/absolute solution:

let second = document.getElementsByClassName('second')[0]
let content = document.getElementsByClassName('absolute')[0]

second.style.height = content.offsetHeight + 'px'
.container {
  display: inline-flex;
  flex-direction: column;
  border: 1px solid red;
}

.child {
  background-color: wheat;
  margin: 5px;
}

.second {
  position: relative;
  /* height to be set by JS */
}

.absolute {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}
<div class="container">
  <div class="first child">
    This content can grow and be as wide as it wants
  </div>
  <div class="second child">
    <div class="absolute">
      This content is longer than the above but still wraps in the right place.
    </div>
  </div>
</div>

Upvotes: 1

Views: 1006

Answers (1)

James T
James T

Reputation: 823

Just set min-width and width of .second:

.container {
  border: 1px solid red;
  display: inline-block;
  padding: 5px;
}

.child {
  background-color: wheat;
}

.second {
  margin-top: 10px;
  min-width: 100%;
  width: 0;
}
<div class="container">
  <div class="first child">
    This content can grow and be as wide as it wants
  </div>
  <div class="second child">
    This content will also be any size it wants, but I * want it to wrap at the asterisk in this sentence, which is where the first child above would naturally end. This will be its own flexbox container holding several buttons that should wrap onto new rows.
  </div>
</div>

Upvotes: 1

Related Questions