CSS: how to set width to children's width?

Question

I want to make a horizontal section, like Quora.com

enter image description here

Here is what I come up with

<div class="out-wrapper">
  <div class="inner-wrapper">
    <% 6.times do %>
      <a class="nav-link pull-left" href="#">Nav 1</a>
    <% end  %>
  </div>
</div>

.out-wrapper{
  overflow-x: scroll;
  .inner-wrapper{
    /* width: 600px; */
    .nav-link{
      padding: 10px;
    }
  }
}

Demo: http://codepen.io/anon/pen/XJZyog

I can only create a horizontal scroll if I set the width to a fixed value.

How can I do this without specify a fixed value? Like width: overall-width-of-children So the width would automatically be the sum width of its all elements

Your css doesn't look to be valid. Maybe that's why it doesn't work? — Morpheus, Feb 16 '15 at 08:42
What is your question again? Do you want a scrollbar or do you want to distribute cells equally without scrollbar. — Salman A, Feb 16 '15 at 08:54
@SalmanA set the `width` automatically equal to the sum of children's `width`. — ZK Zhao, Feb 16 '15 at 09:01
of course, If you set width and overflow-x as scroll, you ll get horizontal scroll only.. what else you need — G.L.P, Feb 16 '15 at 09:05
@cqcn1991 is this what you want: http://codepen.io/anon/pen/raJQgw ? — Salman A, Feb 16 '15 at 09:16
@SalmanA exactly, except it wouldn't consider for `float` element. I think I'll use your solution in my case. — ZK Zhao, Feb 16 '15 at 09:23

Salman A · Accepted Answer · 2015-02-16T09:32:55.293

The browser will wrap elements into new line if they extend beyond the right edge so the width of the parent element will be 100% (max). To avoid this you have two solutions:

Use display: inline-block and white-space: nowrap

.out-wrapper {
  overflow-x: scroll;
}
.out-wrapper .inner-wrapper {
  white-space: nowrap;
}
.out-wrapper .inner-wrapper .nav-link {
  display: inline-block;
  padding: 10px;
  letter-spacing: 2em; /* for demonstration */
}

<div class="out-wrapper">
  <div class="inner-wrapper">
    <a class="nav-link" href="#">Nav 1</a>
    <a class="nav-link" href="#">Nav 1</a>
    <a class="nav-link" href="#">Nav 1</a>
    <a class="nav-link" href="#">Nav 1</a>
    <a class="nav-link" href="#">Nav 1</a>
  </div>
</div>

Use display: table and display: table-cell

.out-wrapper {
  overflow-x: scroll;
}
.out-wrapper .inner-wrapper {
  display: table;
}
.out-wrapper .inner-wrapper .nav-link {
  display: table-cell;
  white-space: nowrap;
  padding: 10px;
  letter-spacing: 2em; /* for demonstration */
}

<div class="out-wrapper">
  <div class="inner-wrapper">
    <a class="nav-link" href="#">Nav 1</a>
    <a class="nav-link" href="#">Nav 1</a>
    <a class="nav-link" href="#">Nav 1</a>
    <a class="nav-link" href="#">Nav 1</a>
    <a class="nav-link" href="#">Nav 1</a>
  </div>
</div>

score 0 · Answer 2 · edited May 23 '17 at 12:27

To succeed what you need, you have to add jQuery to your code to sum width of all your child elements. I have a demo here of what you try to succeed.

HTML

<div class="out-wrapper">
   <div class="inner-wrapper">
     <% 6.times do %>
        <a class="nav-link pull-left" href="#">Nav 1</a>
     <% end  %>
  </div>
</div>

CSS

.out-wrapper{
  overflow-x: scroll;
  overflow-y:hidden;

}
.inner-wrapper{

}
.nav-link{
    padding: 10px;
}

jQuery

$(document).ready(function() {
    var container_width = 0;
    $('.inner-wrapper a').each(function() {
        container_width += $(this).outerWidth( true );
    });

    $(".inner-wrapper").css("width", container_width + 250);
)}

References:

Make content horizontally scroll inside a div

Calculate total width of Children with jQuery

@cqcn1991 As i know, css is acting passive with html, and jquery is acting active. To sum children width it's an action, and an action it's done in an active way. — adricadar, Feb 16 '15 at 09:12

CSS: how to set width to children's width?

2 Answers2