#draggable-container {
    margin: 0 auto;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

.draggable-game-content {
    width: 100%;
    height: 40rem;
}

.draggable-game {
    position: relative;
    border: 1px solid black;
    border-radius: 25px;
    margin-left: 1.5rem;
    height: 38rem;
    text-align: center;
}

#menu-container {
    width: 4rem;
    height: 30rem;
    border: 1px solid #000;
    border-radius: 15px;
    position: relative;
}

.menu-list {
    position: absolute;
    left: 25%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.menu-item {
    display: block;
    margin-bottom: 1.5rem;
    border-radius: 50%;
    border: 1px solid #000;
    height: 2.5rem;
    width: 2.5rem;
}

.menu-item:nth-child(2) {
    margin-bottom: 7rem;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div id="draggable-container">
        <div id="menu-container">
            <ul class="menu-list">
                <li class="menu-item"></li>
                <li class="menu-item"></li>
                <li class="menu-item"><a href="/draggable/gameinfo">info</a></li>
                <li class="menu-item"><a href="/draggable/gamesettings">settings</a></li>
                <li class="menu-item"><a href="/draggable/gameachievements">achievements</a></li>
            </ul>
        </div>
        <div class="draggable-game-content">
            <div class="draggable-game">test</div>
        </div>
    </div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

I have this page generated by React and I don't understand why the div with "test" stays up while the left menu goes down.

I want to make them stay at the same level, like this:

I thought I will achieve this by setting align-items to center (so they will center vertically) and start at the same point, but actually it doesn't work.

Why is my approach not valid and how can I achieve the layout from the page?

CodePudding user response：

Your's align-items should be flex-start

#draggable-container {
    margin: 0 auto;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
}

CodePudding user response：

#draggable-container {
    margin: 0 auto;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start; // updated this line only
}

.draggable-game-content {
    width: 100%;
    height: 40rem;
}

.draggable-game {
    position: relative;
    border: 1px solid black;
    border-radius: 25px;
    margin-left: 1.5rem;
    height: 38rem;
    text-align: center;
}

#menu-container {
    width: 4rem;
    height: 30rem;
    border: 1px solid #000;
    border-radius: 15px;
    position: relative;
}

.menu-list {
    position: absolute;
    left: 25%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.menu-item {
    display: block;
    margin-bottom: 1.5rem;
    border-radius: 50%;
    border: 1px solid #000;
    height: 2.5rem;
    width: 2.5rem;
}

.menu-item:nth-child(2) {
    margin-bottom: 7rem;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div id="draggable-container">
        <div id="menu-container">
            <ul class="menu-list">
                <li class="menu-item"></li>
                <li class="menu-item"></li>
                <li class="menu-item"><a href="/draggable/gameinfo">info</a></li>
                <li class="menu-item"><a href="/draggable/gamesettings">settings</a></li>
                <li class="menu-item"><a href="/draggable/gameachievements">achievements</a></li>
            </ul>
        </div>
        <div class="draggable-game-content">
            <div class="draggable-game">test</div>
        </div>
    </div>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

In Flex to align your items, you must use the align-items property.

You can read more about Flex and its properties in this article.

#draggable-container {
    margin: 0 auto;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
}