CODEWITHSUNDEEP
javascripthtmlcss
Ashton French
Ashton French

Reputation: 370

CSS for responsive container filling remaining space

Consider this HTML:

body {
  background: #dddddd;
  padding: 12px;
  font-family: monospace;
}

.app {
  background: white;
  border: solid 1px #cccccc;
  padding: 12px;
}

.pretext {
  vertical-align: top;
}

.content {
  display: inline-block;
  width: 500px;
}
<div class="app">
  <div class="section">
    <span class="pretext">--</span>
    <span class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam risus lacus, tincidunt ultricies ullamcorper sit amet, facilisis vel lectus. Nam fermentum quam blandit sodales vehicula. Praesent tempus velit ut augue viverra lobortis. Duis non varius ante, eu molestie erat. Phasellus tempus tincidunt lorem, a ornare nunc tincidunt vitae. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque ex ex, sagittis non odio et, tempus tristique urna. Proin risus velit, placerat sed tempor ac, rutrum at lorem. Etiam sodales malesuada orci, in feugiat est porta nec.
    </span>
    <br />
    <span class="pretext">----</span>
    <span class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam risus lacus, tincidunt ultricies ullamcorper sit amet, facilisis vel lectus. Nam fermentum quam blandit sodales vehicula. Praesent tempus velit ut augue viverra lobortis. Duis non varius ante, eu molestie erat. Phasellus tempus tincidunt lorem, a ornare nunc tincidunt vitae. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque ex ex, sagittis non odio et, tempus tristique urna. Proin risus velit, placerat sed tempor ac, rutrum at lorem. Etiam sodales malesuada orci, in feugiat est porta nec.
    </span>
    <br />
  </div>
  <div class="section">
    <span class="pretext">------</span>
    <span class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam risus lacus, tincidunt ultricies ullamcorper sit amet, facilisis vel lectus. Nam fermentum quam blandit sodales vehicula. Praesent tempus velit ut augue viverra lobortis. Duis non varius ante, eu molestie erat. Phasellus tempus tincidunt lorem, a ornare nunc tincidunt vitae. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque ex ex, sagittis non odio et, tempus tristique urna. Proin risus velit, placerat sed tempor ac, rutrum at lorem. Etiam sodales malesuada orci, in feugiat est porta nec.
    </span>
    <br />
    <span class="pretext">--------</span>
    <span class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam risus lacus, tincidunt ultricies ullamcorper sit amet, facilisis vel lectus. Nam fermentum quam blandit sodales vehicula. Praesent tempus velit ut augue viverra lobortis. Duis non varius ante, eu molestie erat. Phasellus tempus tincidunt lorem, a ornare nunc tincidunt vitae. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque ex ex, sagittis non odio et, tempus tristique urna. Proin risus velit, placerat sed tempor ac, rutrum at lorem. Etiam sodales malesuada orci, in feugiat est porta nec.
    </span>
    <br />
  </div>
</div>

You can see that .pretext and .content sit on a horizontal line together. This is sort of the presentation I'm looking for, but I need it to be responsive and not give .content a set width.

I'm trying to style this so that the .pretext and .content elements fill the width on a single horizontal line. Something very important is that the text of .content wraps to the point where its text begins, so far this is achieved via display: inline-block.

I know I can achieve this by setting a specific width on .content, but since .pretext's text and therefore width is subject to change, I am unsure how to style this so that it is responsive to page width and also responsive to .pretext's width.

I know I can calculate size of elements and apply a style via JavaScript, but this is not ideal because the HTML structure could change making the maintenance of this a bit more difficult. Pure CSS would be best if its possible.

Upvotes: 1

Views: 63

Answers (1)

disinfor
disinfor

Reputation: 11533

You can do this using flex. Just wrap the elements in an outer wrapper:

* {
  box-sizing: border-box;
}

body {
  background: #dddddd;
  padding: 12px;
  font-family: monospace;
}

.app {
  background: white;
  border: solid 1px #cccccc;
  padding: 12px;
}

.content-wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin-bottom: 10px;
}

.pretext {
  flex: 1 0 auto;
}

.content {
  flex: 0 1 auto;
  padding-left: 10px;
}
<div class="app">
  <div class="section">
    <div class="content-wrap">
      <span class="pretext">--</span>
      <span class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam risus lacus, tincidunt ultricies ullamcorper sit amet, facilisis vel lectus. Nam fermentum quam blandit sodales vehicula. Praesent tempus velit ut augue viverra lobortis. Duis non varius ante, eu molestie erat. Phasellus tempus tincidunt lorem, a ornare nunc tincidunt vitae. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque ex ex, sagittis non odio et, tempus tristique urna. Proin risus velit, placerat sed tempor ac, rutrum at lorem. Etiam sodales malesuada orci, in feugiat est porta nec.
    </span>
    </div>
    <div class="content-wrap">
      <span class="pretext">----</span>
      <span class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam risus lacus, tincidunt ultricies ullamcorper sit amet, facilisis vel lectus. Nam fermentum quam blandit sodales vehicula. Praesent tempus velit ut augue viverra lobortis. Duis non varius ante, eu molestie erat. Phasellus tempus tincidunt lorem, a ornare nunc tincidunt vitae. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque ex ex, sagittis non odio et, tempus tristique urna. Proin risus velit, placerat sed tempor ac, rutrum at lorem. Etiam sodales malesuada orci, in feugiat est porta nec.
    </span>
    </div>

  </div>
  <div class="section">
    <div class="content-wrap">
      <span class="pretext">------</span>
      <span class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam risus lacus, tincidunt ultricies ullamcorper sit amet, facilisis vel lectus. Nam fermentum quam blandit sodales vehicula. Praesent tempus velit ut augue viverra lobortis. Duis non varius ante, eu molestie erat. Phasellus tempus tincidunt lorem, a ornare nunc tincidunt vitae. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque ex ex, sagittis non odio et, tempus tristique urna. Proin risus velit, placerat sed tempor ac, rutrum at lorem. Etiam sodales malesuada orci, in feugiat est porta nec.
    </span>
    </div>
    <div class="content-wrap">
      <span class="pretext">--------</span>
      <span class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam risus lacus, tincidunt ultricies ullamcorper sit amet, facilisis vel lectus. Nam fermentum quam blandit sodales vehicula. Praesent tempus velit ut augue viverra lobortis. Duis non varius ante, eu molestie erat. Phasellus tempus tincidunt lorem, a ornare nunc tincidunt vitae. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque ex ex, sagittis non odio et, tempus tristique urna. Proin risus velit, placerat sed tempor ac, rutrum at lorem. Etiam sodales malesuada orci, in feugiat est porta nec.
    </span>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions