Possible to set width as auto in this? - html

Question

The first example shows what I'm trying to achieve.
But, I can't set a width to .sub because there might be new items added to .sub. Hence the width should increment accordingly.
But, without setting a width, the result is as shown in example 2.
Any ways to let .sub items grow while maintaining the horizontal layout?
.wrap, .wrap2 {
width: 100px;
}
.container {
width:100%;
background: #ccc;
}
.item {
position:relative;
}
.sub {
background: #eee;
position: absolute;
left:100px;
top:0;
width: 340px;
}
.sub li {
display:inline-block;
border-left: 1px solid black;
padding: 0 10px;
&:first-child {
padding: 0 10px 0 0;
border-left:0;
}
}
.wrap2 .sub {
width:auto;
}
<h4>Example1. This is what I want. But, without setting width to .sub</h4>
<div class="wrap">
<div class="container">
<ul>
<li class="item item1">
hello
<ul class="sub">
<li class="item item1">hello world</li>
<li class="item item2">world hello</li>
<li class="item item3">foo bar</li>
<li class="item item4">bar foo</li>
</ul>
</li>
<li class="item item2">world</li>
<li class="item item3">foo</li>
<li class="item item4">bar</li>
</ul>
</div>
</div>
<h4>Example2. This is what happens when no width is set to .sub</h4>
<div class="wrap2">
<div class="container">
<ul>
<li class="item item1">
hello
<ul class="sub">
<li class="item item1">hello world</li>
<li class="item item2">world hello</li>
<li class="item item3">foo bar</li>
<li class="item item4">bar foo</li>
</ul>
</li>
<li class="item item2">world</li>
<li class="item item3">foo</li>
<li class="4item item4">bar</li>
</ul>
</div>
</div>

Answer 1

You can just add:
.sub {
white-space:nowrap;
}
This will force the contents to stay inline and disregard the width of the parent.
.wrap,
.wrap2 {
width: 100px;
}
.container {
width: 100%;
background: #ccc;
}
.item {
position: relative;
}
.sub {
background: #eee;
position: absolute;
left: 100px;
top: 0;
width: 300px;
white-space: nowrap;
}
.sub li {
display: inline-block;
border-left: 1px solid black;
padding: 0 10px;
&: first-child {
padding: 0 10px 0 0;
border-left: 0;
}
}
.wrap2 .sub {
width: auto;
}
<h4>Example2. This is what happens when no width is set to .sub</h4>
<div class="wrap2">
<div class="container">
<ul>
<li class="item item1">
hello
<ul class="sub">
<li class="item item1">hello</li>
<li class="item item2">world</li>
<li class="item item3">foo</li>
<li class="item item4">bar</li>
</ul>
</li>
<li class="item item2">world</li>
<li class="item item3">foo</li>
<li class="item item4">bar</li>
</ul>
</div>
</div>

Answer 2

you can set display:flex in your .sub
.wrap {
width: 100px;
}
.container {
width: 100%;
background: #ccc;
}
.item {
position: relative;
}
.sub {
background: #eee;
position: absolute;
left: 100px;
top: 0;
display: flex
}
.sub li {
display: inline-block;
border-left: 1px solid black;
padding: 0 10px;
}
.sub li:first-child {
padding: 0 10px 0 0;
border-left: 0;
}
<h4>Example1. This is what I want. But, without setting width to .sub</h4>
<div class="wrap">
<div class="container">
<ul>
<li class="item item1">
hello
<ul class="sub">
<li class="item item1">hello</li>
<li class="item item2">world</li>
<li class="item item3">foo</li>
<li class="item item4">bar</li>
</ul>
</li>
<li class="item item2">world</li>
<li class="item item3">foo</li>
<li class="item item4">bar</li>
</ul>
</div>
</div>
Edit: based on your updated question, you can use as others already pointed out whitespace:nowrap
.wrap {
width: 100px;
}
.container {
width: 100%;
background: #ccc;
}
.item {
position: relative;
}
.sub {
background: #eee;
position: absolute;
left: 100px;
top: 0;
white-space:nowrap
}
.sub li {
display: inline-block;
border-left: 1px solid black;
padding: 0 10px;
}
.sub li:first-child {
padding: 0 10px 0 0;
border-left: 0;
}
<h4>Example1. This is what I want. But, without setting width to .sub</h4>
<div class="wrap">
<div class="container">
<ul>
<li class="item item1">
hello
<ul class="sub">
<li class="item item1">hello world</li>
<li class="item item2">world hello</li>
<li class="item item3">foo</li>
<li class="item item4">bar</li>
</ul>
</li>
<li class="item item2">world</li>
<li class="item item3">foo</li>
<li class="item item4">bar</li>
</ul>
</div>
</div>

Answer 3

Just add white-space: nowrap to your .sub.
.wrap, .wrap2 {
width: 100px;
}
.container {
width:100%;
background: #ccc;
}
.item {
position:relative;
}
.sub {
background: #eee;
position: absolute;
left:100px;
top:0;
width: 300px;
}
.sub li {
display:inline-block;
border-left: 1px solid black;
padding: 0 10px;
&:first-child {
padding: 0 10px 0 0;
border-left:0;
}
}
.wrap2 .sub {
width:auto;
white-space:nowrap;
}
<h4>Example2. This is what happens when no width is set to .sub</h4>
<h4>and white-space:nowrap is added</h4>
<div class="wrap2">
<div class="container">
<ul>
<li class="item item1">
hello
<ul class="sub">
<li class="item item1">hello</li>
<li class="item item2">world</li>
<li class="item item3">foo</li>
<li class="item item4">bar</li>
</ul>
</li>
<li class="item item2">world</li>
<li class="item item3">foo</li>
<li class="item item4">bar</li>
</ul>
</div>
</div>