ARTICLE AD BOX
I have following layout:
JSFiddle: https://jsfiddle.net/Luto0y9x/
The padding-right on the #container works until it reaches the #textfield. No horizontal scrollbar is shown, only when the window becomes too narrow for the textfield. How can I make this work?
#container {
padding-right: 20px;
overflow-x: auto;
background-color: blue;
}
#form {
background-color: red;
}
#input {
width: 300px;
}
<div id="container">
<form id="form">
<input id="input" type="text" />
<select>
<option>Option 1</option>
<option>Option 2</option>
</select>
<button id="button" type="button">x</button>
</form>
</div>
9
What do you want? overflow:scroll?
2026-01-13 15:45:03 +00:00
Commented 15 hours ago
overflow-x: auto on #container
2026-01-13 16:21:52 +00:00
Commented 14 hours ago
The scrollport is the padding box of the element with the overflow property. So put overflow-x: auto on the form element instead, or add an inner-container between the container and the form, and put the overflow-x: auto on that.
2026-01-13 16:33:58 +00:00
Commented 14 hours ago
Thank you for the update, but — same thing. Why do you think the horizontal scrollbar should appear? I can only see wrapping. Make it flex or disable wrapping and see.
2026-01-13 17:13:46 +00:00
Commented 13 hours ago
@SergeyAKryukov because when the window is narrower than the textfield. It still does not work.
2026-01-13 18:19:59 +00:00
Commented 12 hours ago