<div class="flex__container">
<div class="flex__item">
<select id="flex1">
<option value="none">none</option>
<option value="auto">auto</option>
<option value="initial">initial</option>
<option value="2">2</option>
<option value="30vw">30vw</option>
</select>
</div>
<div class="flex__item">
<select id="flex2">
<option value="none">none</option>
<option value="auto">auto</option>
<option value="initial">initial</option>
<option value="2">2</option>
<option value="30vw">30vw</option>
</select>
</div>
<div class="flex__item">
<select id="flex3">
<option value="none">none</option>
<option value="auto">auto</option>
<option value="initial">initial</option>
<option value="2">2</option>
<option value="30vw">30vw</option>
</select>
</div>
</div>
@import url("https://fonts.googleapis.com/css?family=Gochi+Hand");
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
width: 100vw;
min-height: 100vh;
margin: 0;
background-color: #291642;
font-family: "Gochi Hand", sans-serif;
font-size: 100%;
letter-spacing: 0.1rem;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
:root {
--flex1: none;
--flex2: none;
--flex3: none;
}
.flex__container {
inline-size: 80vw;
block-size: 40vh;
min-inline-size: calc(300px + 20vh);
max-inline-size: 96vw;
padding: 2vh;
border: 1px dashed #f36;
overflow: hidden;
resize: horizontal;
display: flex;
align-items: stretch;
}
.flex__item {
padding: 2vh;
border-radius: 4px;
display: flex;
justify-content: center;
align-items: center;
}
.flex__item:nth-child(1) {
background-color: #f36;
flex: var(--flex1);
}
.flex__item:nth-child(2) {
background-color: #cddc39;
flex: var(--flex2);
margin: 0 2vh;
}
.flex__item:nth-child(3) {
background-color: #2196f3;
flex: var(--flex3);
}
select {
font-size: .9em;
max-width: 100px;
min-width: 100px;
}
View Compiled
const selects = document.querySelectorAll("select");
selects.forEach((select) =>
select.addEventListener("change", (e) => {
document.documentElement.style.setProperty(
`--${e.target.id}`,
e.target.value
);
})
);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.