Simply make the container a grid one to have all the elements inside the same column and have the same width:
.outer-container {
width: 200px;
overflow: auto;
display:grid;
}
.grid-container {
display: grid;
grid-template-columns: minmax(200px, 3.5fr) minmax(80px, 1fr);
padding-top: 16px;
padding-bottom: 16px;
}
.grid-underline {
border-top: 2px solid green;
}
.item {
background-color: pink;
}
<div class="outer-container">
<div class="grid-container">
<div class="item">helllo</div>
<div class="item">world</div>
</div>
<div class="grid-underline"></div>
</div>
In this example the underlining border for some reason doesn’t span whole width of container, would appreciate any idea how to fix it.
.outer-container {
width: 200px;
overflow: auto;
}
.grid-container {
display: grid;
min-width: 100%;
width: 100%;
grid-template-columns: minmax(200px, 3.5fr) minmax(80px, 1fr);
padding-top: 16px;
padding-bottom: 16px;
}
.grid-underline {
border-top: 2px solid green;
min-width: 100%;
width: 100%;
}
.item {
background-color: pink;
}
<div class="outer-container">
<div class="grid-container">
<div class="item">helllo</div>
<div class="item">world</div>
</div>
<div class="grid-underline"></div>
</div>
Here is a JSFiddle example:
https://jsfiddle.net/1f9xrsaj/
Looks working to me. Your
1000px seems inaccurate, may be there is js function to get exact width of grid-container content ?
The grid container width is 200px. It’s written in his code which regulates the max width of its child by default unless you want to break it.1000px is only an example. He can change to anything he wants but I doubt he knows how wide he wants because the problem is not the width. It’s about he didn’t understand the relationship among parents and children.
