Here is a simple way to center and maintain the full size of a div, but there seems to be an issue. Take a look at this code snippet:
* {
box-sizing: border-box;
}
.body {
width: 400px;
height: 100px;
float: left;
margin-right: 20px;
position: relative;
}
.body.smaller {
width: 200px;
}
.container {
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
overflow: auto;
border: 2px solid blue;
}
.child {
width: 300px;
height: ...
<div class="body">
<div class="container">
<div class="child"></div>
</div>
</div>
<div class="body smaller">
<div class="container">
<div class="child"></div>
</div>
</div>This code snippet shows that the first sample is properly centered and rendered, but the smaller one has some cropping issues on the green border on the left.
I'm looking for a way to display the entire content of the div using the 'translateX' transform option without relying on tricks like 'margin: 0 auto;' or similar methods.
I have experimented with various combinations of scaled container divs and scrollable child divs, but I haven't had any success so far.
Update: Please note that these sizes are just examples and not definitive. No forced calculations should be necessary to achieve the desired outcome.
Update 2: The 'margin: 0 auto;' method cannot be used to center the div as I am aiming for a specific result. Check out this JSFiddle: https://jsfiddle.net/Emulator000/79c5L6o8/12/
function scale() {
let children = document.getElementsByClassName('child');
for (let i = 0; i < children.length; i++) {
children[i].style.transform = 'scale(3)';
}
}* {
box-sizing: border-box;
}
.body {
width: 400px;
height: 100px;
float: left;
margin-right: 20px;
position: relative;
}
.body.smaller {
width: 200px;
}
.cont...
<button onclick="scale()">Scale</button>If you click the "Scale" button, you can see that the smaller div scales correctly and allows scrolling as expected. However, the larger one leaves empty space as it starts scaling with a fixed margin. This issue also occurs with other techniques like justify, box alignment, or centered text using 'display: inline-block'.