CODEWITHSUNDEEP
htmlcss
Martin
Martin

Reputation: 1343

Full width child elements inside scrollable container

I have a div-container with a fix width and some child-elements witch could be bigger than the parent.

Is it possible to let all the child-elements take the full width of the scrollable area from the parent-element (overflow: auto)?

#container {
    width: 200px;
    background-color: grey;
    overflow:auto;
    margin:10px;
}

#container p{
    display:block;
    background-color: green;
    white-space: nowrap;
    width: 100%;
}
<div id="container">
    <p>Sample Text 1</p>
    <p>Sample Text 2</p>
    <p>A very very very very very long Sample Text</p>
</div>

Here is the fiddle. When you scroll to the right, you can see that the child-elements background-color is smaller than the content.

childs are too small

Upvotes: 13

Views: 2589

Answers (3)

Jacob G
Jacob G

Reputation: 14172

Wrap the content in a div, and set it to display: inline-block:

#container {
  width: 200px;
  background-color: grey;
  overflow: auto;
  margin: 10px;
}

#container>div {
  display: inline-block;
}

#container p {
  display: block;
  background-color: green;
  white-space: nowrap;
}
<div id="container">
  <div>
    <p>Sample Text 1</p>
    <p>Sample Text 2</p>
    <p>A very very very very very long Sample Text</p>
  </div>
</div>

Upvotes: 11

Stickers
Stickers

Reputation: 78686

You could set the child elements to display:table-row;

#container {
    width: 200px;
    background-color: grey;
    overflow: auto;
}
#container p {
    display: table-row;
    background-color: green;
    white-space: nowrap;
}
<div id="container">
    <p>Sample Text 1</p>
    <p>Sample Text 2</p>
    <p>A very very very very very long Sample Text</p>
</div>

Add a extra <div> if you need extra controls for styling.

#container {
    width: 200px;
    background-color: grey;
    overflow: auto;
}
#container div {
    display: table;
    border-spacing: 0 10px;
}
#container p {
    display: table-row;
    background-color: green;
    white-space: nowrap;
}
<div id="container">
    <div>
        <p>Sample Text 1</p>
        <p>Sample Text 2</p>
        <p>A very very very very very long Sample Text</p>
    </div>
</div>

Upvotes: 3

unbl0ck3r
unbl0ck3r

Reputation: 379

You can use from absolute position property to do that . 

#container {
    width: 200px;
    background-color: grey;
    overflow:auto;
    margin:10px;
}
#container p{
    display:block;
    background-color: green;
    white-space: nowrap;
    position:absolute;
}

Upvotes: 0

Related Questions