0

Is there a way to place the content of a container such that it is the second element that appears to be centered, instead of simply centering all children?

So that in my example there would be 30px before the sidebar and 50px after the main-content, instead of having 40px on each side.

I can't just use absolute positioning, as I in the case that the main-content is to large, still want to be able to see the sidebar.

The point is that I have a sidebar, that isn't always visible, and when toggling it on, I do not want it to push the main-content, if there actually is room for it.

class MyComponent extends React.Component {
    render() {
        return (
            <div className="wrapper">
                <div className="sidebar" />
                <div className="main-content" />
            </div>
        );
    }
}

// Render it
ReactDOM.render(
    <MyComponent />,
    document.getElementById("root")
);
.wrapper {
  background: black;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 200px;
  width: 500px;
}

.sidebar {
 background: red;
 height: 100%;
 width: 20px;
 flex-shrink: 0;
}

.main-content {
  background: blue;
  height: 100%;
  width: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>
some_name
  • 389
  • 3
  • 17
  • That was a mighty shame. I just spent 5 minutes coding a response to this and it closed. – Que Jul 13 '22 at 12:52
  • Can I re-open it somehow, because the linked question does not seem to solve my issue:) – some_name Jul 13 '22 at 12:54
  • How does it not answer your question ? – Rainbow Jul 13 '22 at 12:58
  • Ah, I hadn't seen the accepted answer - maybe it does solve my issue, I will give it a try:) – some_name Jul 13 '22 at 13:05
  • [Demo](https://jsfiddle.net/ztc4pea6/) using Solution #3, make sure you understand the idea – Rainbow Jul 13 '22 at 13:09
  • @Que happens to me a LOT – Simp4Code Jul 13 '22 at 13:27
  • Thank you - Yeah, that was also the solution I decided to try out - and it works! I do however have to set the flex-shrink to a very high value, to make sure that the pseudo element wont cause the main-content to be smaller :) – some_name Jul 13 '22 at 13:29
  • @Que instead of writing an answer to a question try to think if this question might already have an answer. Then you can save yourself quite some time. – cloned Jul 14 '22 at 06:49

0 Answers0