0
299
Viewsflexbox - how to make 2 flex-item have same width
I want 2 flex-item have the same width, no matter what is the width of the content.
After I set flex: 1 1 0; on flex-item, it still not works as expected
because I expect the width of ME will be same as Everyone
App.js
import React from 'react'
import "./style.css";
function Tab() {
return (
<div className="tab">
<div className="tab__item">Me</div>
<div className="tab__item">Everyone</div>
</div>
)
}
export default Tab
style.css
.tab {
display: flex;
}
.tab .tab__item {
flex: 1 1 0; // not working
border: 1px solid #c3c4c7;
padding: 0.1rem 0.2rem;
}
·
Juan Pablo Isaza
2 answers
Answer question0
It might be related to your other styles somewhere else but you could try this
function App() {
return (
<div className="tab">
<div className="tab__item">Me</div>
<div className="tab__item">Everyone</div>
</div>
)
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);.tab {
display: flex;
}
.tab .tab__item {
width: 100%;
border: 1px solid #c3c4c7;
padding: 0.1rem 0.2rem;
} <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="root"></div>
·
Juan Pablo Isaza
Report
0
Maybe this?
.tab .tab__item {
flex-basis: 50%;
border: 1px solid #c3c4c7;
padding: 0.1rem 0.2rem;
}
·
Juan Pablo Isaza
Report
Answer question